i am new to react and i need to learn a few things i need to know if my way to get spesific movie is correct (its working but i think its not the right way) i have a state of data i need to get spesific object inside the array and this object will display in the componente "spesificMovie" so to get the right object i create function that run with filter on the state with data and then search if the name eqeual to the name i give to the func as argument i will return the object to another state that will be the spesificMovie and this state i move to the componente spesificMoive

import { useState } from "react";

import Movie from "./componente/Movie";
import SpesificMovie from "./componente/SpesificMovie";


function App() {
  const [spesificMovie, setSpesificMovie] = useState();
  const getMovieFunc = (name) => {
    movies.filter((movie) => {
      if (movie.movieName == name) return setSpesificMovie(movie);
    });
  };
  const [movies, setMovies] = useState([
    {
      movieName: "godfather",
      info: "the rise of  corelone family  all mater is respect,money,woman but the youngest son michal has a diffrent plans...",
      picture: "pictures/godfather.jpg",
      rating: [10, 5, 1],
    },
    {
      movieName: "scarface",
      info: "the rise of  tony montata the badass man of miami want to control miami and be the number 1 of the cocaine provider ...",
      picture: "pictures/scarface.jpg",
      rating: [10, 9, 2],
    },
    {
      movieName: "the-dark-knight",
      info: "you all knew that he will come the batman! come to fight with his popular rival the joker...",
      picture: "pictures/the-dark-knight-poster.jpg",
      rating: [10, 10, 9],
    },
  ]);
  return (
    <div className="App">
    
      
      
         <SpesificMovie spesificMovie={spesificMovie}/>
       <Movie movies={movies} getMovieFunc={getMovieFunc}/>
    
    </div>
  );
}

export default App;