Как сделать фильтрацию базы данных (API) через input в React JS (в функциональном компоненте)

есть API( объект, который содержит 2 массива ) Сперва я получил данные и вывел их так, как мне необходимо. Создал 2 компонента: Header, в котором есть компонент Input и Page, в котором есть данные

Код для получения данных:

import React, { Component } from 'react'
export default class Images extends Component {

    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: []
        };
    }


    componentDidMount() {
        fetch("https://rickandmortyapi.com/api/character")
            .then(response => response.json())
            .then(result => {
                this.setState({
                    isLoaded: true,
                    items: result.results
                })
            })
            .catch(() => console.log("Can’t access response. Blocked by browser?"))
    }

    render() {
        let { items } = this.state;

        const baza =
            items.map(item => (
                <div key={item.name}>
                    <div className="card">
                        <div>
                            <img alt={`${item.name}`} src={item.image} />
                        </div>
                        <div />
                        <div>
                            <p>Имя: {item.id}</p>
                            <p>Категория: {item.species}</p>
                            <p>Пол: {item.gender}</p>
                            <p>Начало: {item.origin.name}</p>
                            <p>Местоположение: {item.location.name}</p>
                        </div>
                    </div>
                </div>
            ))

        return (
            <div className="containerCard">
                {baza}
            </div>
        )
    }
}
    

Код для создания Input

import React, { Component } from 'react'

export default class Input extends Component {

    constructor(props) {
        super(props)
        this.state = {
            search: null
        };
    }

    render() {
        return (
            <div>
                <input className="formHeader"}
                    placeholder="Введите номер серии"
                    type="number"></input>
            </div>
        )
    }
}

Что хочу узнать: Как сделать фильтрацию. Вообще, мне нужно ввести в Input (Который является числом type="number") номер серии и вывести персонажей, которые есть в этой серии. Но если вы покажете, как вывести нужную карточку, если совпадает id, для меня уже будет счастьем ( То есть, вводим в Input 1 и выводим карточку, у которой id = 1)

Также опишу структуру: В App.js я рендерю Header и Page В Header: рендерю Input В Page рендерю Infa

В Infa я получаю данные и вывожу их в (Самый первый код)