i am new to react
i have component with name of menu.js as follow.

import React , {useState} from 'react'

 const Menu = () => {
  const [text , setText] = useState('')

  const handelText = (event) =>{    
    localStorage.setItem('searchtext', event.target.value)
    setText(event.target.value)           
  }  

  return (
    <div>
      <nav className='navbar navbar-dark bd-dark' dir='rtl'>
        <form className='form-inline'>            
            <input 
                className="form-control mr-sm-2" 
                type="search" placeholder="search for product name" 
                aria-label="Search" 
                onChange={handelText}                                                                                                               
            />            
        </form>       
      </nav>             
    </div>
  )
}

export default Menu;

and i want to use the value of inputbox of menu component in home component so i can filter products base on search term

here is home.js

import React , {useState, useEffect} from 'react'
import { getProducts } from './helper/Coreapicalls';
import Base from './Base';
import Card from './Card';
import "../styles.css"


export default function Home () {

  const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]) 
  const [error, setError] = useState(false);  
  const [searchIsPresent, setSearchIsPresent] = useState(true); 
  const [searchTerm, setSearchTerm] = useState('');// i want to set this state as inputbox value of Menu component and use it later  
    

  const loadAllProducts = () => {
    getProducts()
    .then((data) =>{
      if (data.error){
        setError(data.error);
        console.log(error);
      }
      else{
        setProducts(data);
      }
    })    
  }   

  useEffect(() => {
    loadAllProducts()
  }, []);
  
  function filterItems(arr, query) {
    return arr.filter((el) => el['subbranch3'].toLowerCase().includes(query.toString().toLowerCase()));
  }  
  
  const loadFilteredProducts = () => {
    setFilteredProducts(filterItems(products, searchTerm))
    // if (filteredProducts.length !== 0) {
    //   setSearchIsPresent(true)
    // }else{
    //   setSearchIsPresent(false)
    // }    
  }


  useEffect ( () => {
    loadFilteredProducts()
  }, [searchTerm])  

  const showSearchResult = searchIsPresent =>{
    return(
      searchIsPresent &&
      <div className="row">
         {filteredProducts.map((fProduct, index) =>{
          return(
            <div key={index} className='col-4 mb-4'>
              <Card product={fProduct}/>
            </div>
          )
        })}
      </div>
    )
  }
  
  
  return (
    <Base title='home page' description='welcome'>      
      <div>
        {showSearchResult(searchIsPresent)}
      </div>
      <div className="row">
         {products.map((product, index) =>{
          return(
            <div key={index} className='col-4 mb-4'>
              <Card product={product}/>
            </div>
          )
        })}
      </div>
    </Base>
  );
}

how could i do that?

ps: these two components are two independent component and does not have any relation (like parent child)
any help would be appriciated

using props and localstorage to grab the value but it did not work for me