ReactJS: Hide Footer on certain routes or during specific actions like search [closed]

I want to hide the Footer component when the Body (Home page) is displayed and a search is performed. However, the Footer should remain visible on other pages like About or Contact.

I tried using a state variable (isSearching) in Body.js and passing it to the Footer component, but it doesn’t work as expected. Instead, the Footer is either always visible or hidden.

How can I hide the Footer during a search in Body.js and also conditionally hide it on specific pages?

Here’s my relevant code:

> Body.js

const Body = () => {
  const [isSearching, setIsSearching] = useState(false);
  
  const handleSearch = () => {
    setIsSearching(true);
  };

  return (
    <div>
      <button onClick={handleSearch}>Search</button>
      <Footer isSearching={isSearching} />
    </div>
  );
};

> Footer.js

const Footer = ({ isSearching }) => {
  if (isSearching) return null;
  return <footer>Footer Content</footer>;
};

> app.js

  const AppLayout = () => (
  <div>
    <Header />
    <Outlet />
    <Footer />
  </div>
);

Is there a better way to conditionally hide the footer on specific components/pages in React Router? Please help!