trying to make checkbox search filter in react

I'm trying to make a function that filters data when user chekced some checkboxes. and I've tried so many ways and still couldn't figure out how to show the filtered results.

import React, { useState } from "react";
import styles from "./filter.module.css";

const Filter = ({ reqInfo, handleFilter }) => {
  const [checkedHello, setCheckedHello] = useState([]);
  const [checkedWords, setCheckedWords] = useState([]);

  const hello = ["welcome", "world"];
  const words = ["name", "my"];

  const handleHello = (value) => {
    const currentIndex = checkedHello.indexOf(value);
    const newChecked = [...checkedHello];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }
    setCheckedHello(newChecked);
    handleFilter(newChecked, "method");
  };

  const handleWords = (value) => {
    const currentIndex = checkedWords.indexOf(value);
    const newChecked = [...checkedWords];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }
    setCheckedWords(newChecked);
    handleFilter(newChecked, "hello");
  };

 
  return (
    <section className={styles.section}>

      <div className={styles.filter}>
        {hello.map((hello) => (
          <label htmlFor={hello} key={hello}>
            <input
              type="checkbox"
              name={hello}
              value={hello}
              onChange={() => handleHello({ hello })}
            />
            {hello}
          </label>
        ))}
      </div>

      <div className={styles.filter}>
        {words.map((words) => (
          <label htmlFor={words} key={words}>
            <input
              type="checkbox"
              name={words}
              value={words}
              onChange={(e) => handleWords(e.currentTarget.value)}
            />
            {words}
          </label>
        ))}
      </div>

      <div></div>
    </section>
  );
};

export default Filter;

this is upper component

import React, { useEffect, useState } from "react";
import Filter from "../filter/filter";
import RequestBox from "../request_box/request_box";
import styles from "./item_container.module.css";

const ItemContainer = ({ requestInfo }) => {
  const [reqInfo, setReqInfo] = useState([]);
  const [filtered, setFiltered] = useState({ method: [], material: [] });

  useEffect(() => {
    requestInfo.getInfo().then((info) => setReqInfo(info));
  }, [requestInfo]);

  const handleFilter = (filter, key) => {
    const newFiltered = { ...filtered };
    newFiltered[key] = filter;
    setFiltered(newFiltered);

    showFilteredRes(newFiltered);
  };

  const showFilteredRes = (filtered) => {
    reqInfo.forEach((info) => {
      console.log(info.hello);
      Object.keys(filtered).forEach((key) => {
        console.log(key);
        if (info === key) {
          console.log("true");
        }
      });
    });
  };

  return (

      <Filter reqInfo={reqInfo} handleFilter={handleFilter} />

      <ul className={styles.cards}>
        {reqInfo.map((info) => (
          <RequestBox reqInfo={info} key={info.id} />
        ))}
      </ul>
  );
};

export default ItemContainer;

and the reqInfo data looks like this

{
  "tests": [
    {
      "id": 1,
      "title": "test1",
      "hello": ["welcome", "world"],
      "words": ["name"],

    },
    {
      "id": 2,
      "title": "test2",
      "hello": ["world"],
      "words": ["my"],

    },

and the part that I'm struggling with is making showFilteredRes function in upper class. how can I compare reqInfo with filtered data and filter them?