Моя кнопка ввода не будет выдвигать элементы в список (React JS)

Итак, я пытаюсь создать приложение списка с помощью React. У меня нет ошибок или предупреждений, и моя панель ввода отображается, но мой текстовый список не отображается. Другими словами, когда я нажимаю Enter, текстовая информация, которую я помещаю в панель ввода, не создает список, как ожидалось. Я пытался использовать keyCode === 13 и onKeyDown, но это никак не повлияло на приложение. Что я упускаю?

Вот мой код:

отфильтрованный input.js

import React, { Component } from "react";
import "./filtered-input.css";
import ItemList from "./item-list";

export class FilteredInput extends Component {

 constructor(props) {
  super(props);
   this.state = {
   textList: [],
  };
 }


handleChangeEvent(e) {
this.setState({ value: e.target.value });
}

handleAdd = (e) => {
if (e.keyCode === 13) {
  let lists = this.props.state.textList;
  lists.push(this.props.state.value);
  this.setState({ textList: lists });
 }
};

render() {

console.info("Here comes state -->");
console.info(this.state);

return (
  <div>
    <input
      className = "filtered-input-box"
      type = "text"
      onKeyDown = {this.props.handleAdd}
      value = {this.state.value}
      onChange = {this.props.handleChangeEvent}
    />
    <ItemList item = {this.state.textList}></ItemList>
  </div>
  );
 }
}

ItemList.js

import React, { Component } from 'react';


export class ItemList extends Component {
render() {
const items = this.props.item.map((item) =>
    <li>{item}</li>
);

return (
        <ul>
            {items}
        </ul>
    );
   }
 }

export default ItemList;

App.js

import React, { Component } from 'react';
import { FilteredInput } from './filtered-input.js';

export class App extends Component {
  render() {

    return (

        <div>

            <p>This page demonstrates a component that maintains its own state.</p>

            <FilteredInput />


        </div>

      );

     }

   }