Using Next.js, I’m trying to use the value of a state from a page component in its layout component. Here’s what it looks like:

/* src/pages/layout.jsx */

"use client"

const Layout = ({ children }) => {
  return <>
    <div>
      <div id="portalTarget"></div>
      {children}
    </div>
  </>
}

export default Layout

/* src/pages/page.jsx */

"use client"

const Page = () => {
  const [myState, setMyState] = useState(0)

  // useEffect with zero-length dependencies,
  // because otherwise `document` wouldn't have been set
  useEffect(() => {
    createPortal(
      <p>{myState}</p>,
      document.getElementById("portalTarget"),
    );
    console.log(document.getElementById("portalTarget")
    //Prints `<div id="portalTarget">`, so the target is definitely already rendered.
  }, [])

  return <button onClick={() => { setMyState(prev => prev + 1) }}>
    Increment my state
  </button>
}

export default Page

The problem is,<p>{myState}</p> does not get rendered. I inspect the DOM and it’s still an empty div. What’s wrong?