1. Parent:

    import React from "react";
    import "./styles.css";
    import Child1 from ...
    import Child2 from ...
    
     export default App = () => {
       const [footprint, setFootprint] = useState(false);
       return (
       <div className="App">
         <Child1 setFootprint={setFootprint} />
         <Child2 footprint={footprint} />
       </div>
     )}
    

);

  1. Child1:

    import React from "react";
    import "./styles.css";
    
    export default const Child1({setFootprint}) {
      onMouseEnter={() => {
        setFootprint(true)
      }}
      onMouseLeave={() => {
        setFootprint(false)
      }}
    }
    
  2. Child2:

    import React from "react";
    import "./styles.css";
    
    export default const Child2({footprint}) {
     if (footprint) const message = <div>FOOTPRINT AVAILABLE</div>
     return message
    }