Bidirectional useState update in wrapper component

I’m passing a useState from a children, back to an ancester parent, which in my case is a wrapper component.

useState propagtes from LoggingState component successively LoggingState → Menu → Header → Wrapper.

Screenshot from 2022-04-08 23-07-54

I can’t find a way to Propagate back from Wrapper to FirstComponent


<Header setUser={setUser} />
<Footer />

The complete code is here

The answer was to use React.cloneElement so it would be possible to pass the component with the state.

In the Wrapper Component:

<Header setUser={setUser} />
{React.cloneElement(props.children, { user, setUser })}
<Footer />

FirstComponent accessing the current value in props.user:

export const FirstComponent = (props) => {
const [user, setUser] = useState(props.user)

  useEffect(() => {
  }, [props, user]);
  return (
        <div>User is : {user}</div>

Working code example

Also check React Context.