Render массива из props

Пишу свой поиск по массиву, хочу изначально отображать массив таким какой он есть и потом при изменении value менять само отображение массива. Не понимаю почему он не отображается в принципе, явно что-то не так делаю, подскажите пожалуйста. В Реакте новичек, поэтому любая критика очень приветствуется, заранее благодарен.

Мой компонент Search:

import React, {Component} from 'react';
export default class Search extends Component {
    constructor(props) {
        super(props);
        this.listItems = this.props.items;
    }
    state = {
        value: ''
    };
    renderArr = (arr) => {
        return <ul>
            {arr.map((i, key) => {
                return <li key={key}>{i}</li>
            })}
        </ul>
    };

    filterArr = e => {
        const value = e.target.value.toLowerCase();
        this.listItems = this.props.items.filter(item => {
            return item.toLowerCase().includes(value);
        });
        console.log(this.listItems);
        return this.renderArr(this.listItems);
    };
    componentDidMount() {
        this.setState({
            value: this.search.value
        });
    }
    render() {
        return (
            <div className="">
                <input type="text"
                       ref={input => this.search = input}
                       onChange={this.filterArr}
                />

            </div>
        )
    }
}