Portal

A component in React represents a logical unit in the UI.
In most cases, that logical unit is located in the same place in the DOM as the component itself.
There are cases where a component needs to render some ui in a different place in the DOM, and not where the component is located.
Perhaps it’s best to demonstrate with a simple example:

export default function Home({ data }) {
  return (
    <div>
      <h1>Hello {data}</h1>
    </div>
  );
}
  
export function getServerSideProps() {
  return {
    props: { data: "world" },
  }
}

Open Sandbox