React JS, Arama kutusu bu koda nasıl yapabilirim?

Search İnput nasıl yapabilirim?

görmüş olduğunuz koda nasıl arama kısmı ekleyebilirim yapamıyorum lütfen yardımcı olun.

import React, { useState, useEffect } from "react";
import firebase from "../firebase";

import "./row.css";

function useAksiyon() {
  const [aksi, setAksi] = useState([]);
  useEffect(() => {
    firebase
      .firestore()
      .collection("aksiyon")
      .onSnapshot((snapshot) => {
        const newAksi = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setAksi(newAksi);
      });
  }, []);
  return aksi;
}

const AksionList = () => {
  const aksi = useAksiyon();

  return (
    <div className="row">
      <h3>Aksiyon Filmleri</h3>
      <div className="row__posters">
        {aksi.map((aksiyon) => (
          <a href={aksiyon.movies_iframe} key={aksiyon.movies_id}>
            <img
              className="row__poster"
              src={aksiyon.movies_poster}
              alt={aksiyon.movies_title}
            />
          </a>
        ))}
      </div>
    </div>
  );
};

export default AksionList;

?>

import React, { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [data, setData] = useState(null); const [searchData, setSearchData] = useState(null); useEffect((_) => { setData([ { name: "Who Am I", poster: "http:///" }, { name: "Düğün Dernek", poster: "http:///" }, { name: "Deneme", poster: "http:///" } ]); }, []); const search = (e) => { if (e && e != "") { console.log(e) setSearchData(data.filter((x) => x.name.indexOf(e) > -1)) } else { setSearchData(data) } }; return ( <div className="App"> <input onChange={(e) => search(e.target.value)} /> {searchData && searchData.map((x) => <span>{x.name}</span>)} <div></div> </div> ); }