How can i implement value of input like an search?

I’m currently facing an issue with setting the value of an input field for search functionality in my React application. I’ve attempted to achieve this using both state management (useState) and the React hook useRef(), but unfortunately, neither approach seems to be working as expected.

Here’s what I’ve tried so far:

import React, { useEffect, useState } from 'react';
import "./App.css";
import MovieList from './Components/MovieList';
import NavBar from './Components/NavBar';

function App() {
 const [data, setData] = useState([]);
 const [search, setSearch] = useState('');

 useEffect(() => {
  fetch(`http://www.omdbapi.com/?s=${search}&apikey=a8b01dfe`)
    .then(respone => respone.json())
    .then(json => setData(json.Search))
    .catch(error => console.error(error))
 }, [search]);

 const handleSearch = (e) => {
  setSearch(e.target.value);
 }

 return (
   <div>
     <MovieList movie={data}/>
     <NavBar search={handleSearch} />
   </div> 
 );
}

export default App;

import React from 'react';

function NavBar(props) {
  return (
    <div>
      <input ref={props.search} type='text' placeholder='Search...'/>
    </div>
  );
}

export default NavBar;

Here is how i render movies:

import React from 'react';
import "./Style/MovieList.css"

function MovieList(props) {
 const item = document.querySelector(".movie-list-main-container");

  window.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) item.scrollLeft += 100;
    else item.scrollLeft -= 100;
  });

  return (
    <div className='movie-list-main-container'>
      {props.movie.map((item, index) => (
        <div className='movies' key={index}><img src={item.Poster} alt={item.Title}/></div>
      ))}
    </div>
  );
}

export default MovieList;