I'm trying to find a way to create a search component <SearchBar /> and display the result array through another component <TableData />. I managed to build it up to a certain point but is not showing the desired result. The problem is that is not shows the data until i start typing. When the parent component first loaded or i made a refresh, the data disappeared. Also when the parent component first loads, the filterProjects from useState render an empty array.

How can i display all the data when the components loads ?

Here's my code block:

const Overview = () => {

  const appCtx = useContext(AppContext);

  // Copy the incoming data from the context
  const newFilterCopy = [...appCtx.projects];

  // Create new state for filtered data
  const [filterProjects, setFilterProjects] = useState(newFilterCopy);

  // Function that takes the input coming from the SearchBar component
  const filterFunc = (input) => {
    if (input === '') {
      setFilterProjects(filterProjects);
    }

    const resultProjects = newFilterCopy.filter((project) =>
      project.projectCompanyName.toLowerCase().startsWith(input.toLowerCase())
    );
    setFilterProjects(resultProjects);
    return resultProjects;
  };

  

  return (
    <div className={classes.Overview}>
      <Container>
        
       <SearchBar
          placeholder='Search project by company name'
          onInput={filterFunc}
        />

        <div className={classes.TableContainer}>
          <ExportBtn />
          <TableData data={filterProjects} />
        </div>
      </Container>
    </div>
  );
};

export default Overview;