Filter json data when click button in react

i have a json file as a server, i need filter the data json when i click in a button, example, in the Navbar i have:

const NavBar = ({setSearchValue, setType}) => {
  const handleType = (heroType) =>{
    setType(heroType)
    }

  return (
// this input is ok, i can search data from here
              <input id='searchInput' placeholder='Search' onChange={(event) => {setSearchValue(event.target.value)}}/>
//these are the buttons
            <Nav.Link onClick={() => handleType('All')}>All Heroes</Nav.Link>
            <Nav.Link onClick={() => handleType('Flying')} >Flying Heroes</Nav.Link>
            <Nav.Link onClick={() => handleType('Flightless')}>Flightless Heroes</Nav.Link>

and this is where i need to show it

  //import Navbar
        import NavBar from "./NavBar";
        
        const Home = () => {
    // saved the data i need to show 
          const [content, setContent] = useState();
    // saved the searchvalue of navbar, its ok.
          const [searchValue, setSearchValue] = useState("");
    // i tried save the button data here, next with a IF function i tried to show it, no work
          const [type, setType] = useState("Flying");
        
          useEffect(() => {
// get json dta
            const getData = async () => {
              const response = await db.get("data");
        
              let data = response.data.filter((val) => {
// if no searchValue, return all
                if (searchValue === "") return val;
//if searchVale, return coincidences
                else if (val.nombre.toLowerCase().includes(searchValue.toLowerCase()))
                  return val;
              });
        // returns bootstrap rows depending on number of elements
              const rows = [...Array(Math.ceil(data.length / 3))];
              const imagesRows = rows.map((row, idx) =>
                data.slice(idx * 3, idx * 3 + 3)
              );
        //saved all in setContent
              setContent(
                //code
                )
            getData();
          }, [searchValue]);
        
          return (
            <>

              <NavBar setSearchValue={setSearchValue} setType={setType} />
//show content
              <Container>{content >= 0 ? <p>No results</p> : content}</Container>
            </>
          );
        };

I’ve tried a lot of things, i think i need change a lot of code i a want this work.
Any help would be extremely appreciated.