Help me help my nephew with a React problem

I'm a PHP guy. My nephew is at university doing computer science and has asked me to help him with a React problem. Essentially, he is trying to call a function and it's not happening for him. Hopefully some react geniuses can make sense of this.

He wants to call the handleClick function that's in the search.js file FROM the side tab.js file and he says it's not working. really appreciate any help here.

SEARCH.JS

import React, { useState } from "react";
import FetchNutrition from "./FetchNutrition";
import FetchRecipes from "./FetchRecipes";


function Search() {
  const [searchString, setSearchString] = useState("");
  const [searchField, setSearchField] = useState("");
  const [isShown, setIsShown] = useState(false);
 
  function handleClick() {

// function I want to call in SideTab.js

    setSearchField(searchString);
    setIsShown(true);

    }
  return (
    <div id="searchdiv">
      <div id="searchbar">
        
        <input
          id="searchinput"
          className="form-control"
          type="text"
          placeholder="Search ..."
          onChange={(e) => setSearchString(e.target.value)}
        />
        <button onClick={handleClick}>Search</button>
      </div>




// "query" is what I want to change as upon changing it a React useEffect hook will be triggered
      
      {isShown && <FetchNutrition query={searchField}/>}
      {isShown && <FetchRecipes query={searchField}/>}

    </div>
  );
}
export default Search;

SideTab.js

import React, { useState } from "react";
import RadioButtons from "./RadioButtons";
import { handleClick } from "./Search";

const SideTab = () => {

    
function showsidetab() {
    if(document.getElementById("sidetab").style.display == "none") {
        document.getElementById("sidetab").style.display = "block";
        
    }
    else {
        document.getElementById("sidetab").style.display = "none";
    
    }

    

}

    const [veggie, setVeggie] = useState(false);
    const [vegan, setVegan] = useState(false);
    const [gluF, setGluF] = useState(false);
    const [lowF, setLowF] = useState(false);

    function handleDisplayVeggie() {
        veggie ? setVeggie(false) : setVeggie(true);
        if(veggie == false){
            let vegg = "Vegetarian";
           document.getElementById("searchinput").innerHTML = vegg;
           
// want to call handleClick() function from Search.js here
// or at least set "query" as "vegg"

        }
        
      }
      function handleDisplayVegan() {
        vegan ? setVegan(false) : setVegan(true);
      }
      function handleDisplayGluF() {
        gluF ? setGluF(false) : setGluF(true);
      }
      function handleDisplayLowF() {
        lowF ? setLowF(false) : setLowF(true);
      }
  
    return (
      
      <div>
        <div id="sidetab">
            Filter settings:
            <div>
                <RadioButtons 
                    veggie={veggie}
                    vegan={vegan}
                    gluF={gluF}
                    lowF={lowF}
                    onVeggieChange={handleDisplayVeggie}
                    onVeganChange={handleDisplayVegan}
                    onGluFChange={handleDisplayGluF}
                    onLowFChange={handleDisplayLowF}
                    />
            </div>
        </div>
        <div id="showsidetab" onClick={showsidetab}>&equiv;</div>
      </div>
    );
  };
  export default SideTab;
``