Handle sibling state with React useState hook

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
   }