React search bar to render cards dynamically

I have a movie app which displays a card for each movie in a state.

I would like to use a dynamic search bar to render movies corresponding to the search input value.

For instance, if I start to write "Har", I want to see only movies with a title that begins with "Har".

The app code :

import React, { useState, useEffect } from "react";
import "./App.css";
import Logo from "../components/Logo";
import Search from "../components/Search";
import Add_movie_button from "../components/Add_movie_button";
import Random_movie_button from "../components/Random_movie_button";
import Movie_card from "../components/Movie_card";
import axios from "axios";

const BASE_URL = "https://api.themoviedb.org/3/movie/";
const API_KEY = "4bcd155b9b8734cb8559319cdbfaf62f";

function App() {
  const [movieinfos, setMovieinfos] = useState([]);
  console.log(movieinfos);

  useEffect(() => {
    axios
      .get("http://localhost:5000")
      .then(function (response) {
        const movies = response.data.movies;
        console.log(response.data.movies);
        return Promise.all(
          movies.map((movie) =>
            axios.get(
              `${BASE_URL}${movie.movieid}?api_key=${API_KEY}&language=fr`
            )
          )
        );
      })
      .then((responses) => {
        console.log(responses);
        setMovieinfos(
          responses.map((response) => ({
            Genres: response.data.genres,
            Overview: response.data.overview,
            Poster: response.data.poster_path,
            Company: response.data.production_companies,
            Release: response.data.release_date,
            Title: response.data.title,
            Id: response.data.id,
          }))
        );
      });
  }, []);

  return (
    <div className="App">
      <div className="Header">
        <Logo />
      </div>
      <div className="Menu">
        <Search movieinfos={movieinfos} setMovieinfos={setMovieinfos} />
        <Add_movie_button />
        <Random_movie_button data={movieinfos} />
      </div>
      <div className="Movies">
        {movieinfos.map((movie) => (
          <Movie_card key={movie.Title} data={movie} />
        ))}
      </div>
    </div>
  );
}

export default App;

The search bar code :

import React from "react";
import "./style.css";

const Search = (props) => {
  console.log(props);
  return (
    <div className="Search">
      <input
        type="search"
        id="Search_input"
        placeholder="Rechercher un film ..."
        value= //WHAT DO I NEED TO WRITE HERE ?
        onChange={(event) =>
          /*WHAT DO I NEED TO WRITE HERE ?*/ event.target.value
        }
      />
    </div>
  );
};

export default Search;