異なるルートノードにレンダリングする個別のコンポーネント間で、stateを共有したい

Question

実現したいこと

Component1をroot1に、Component2をroot2にという形で
2つのコンポーネントをそれぞれ異なるルートノードにレンダリングしたいのですが、
その際Component1の状態をComponent2にも反映させたいです。

前提

create react app を使用しています

発生している問題・エラーメッセージ

Component1の状態をComponent2に反映させるやり方がわかりません。

該当のソースコード

const root1 = ReactDOM.createRoot(
  document.getElementById("root1") as HTMLElement
);
root1.render(
  <React.StrictMode>
    <Component1 />
  </React.StrictMode>
);

const root2 = ReactDOM.createRoot(
  document.getElementById("root2") as HTMLElement
);
root2.render(
  <React.StrictMode>
    <Component2 />
  </React.StrictMode>
);

import { useState } from "react";
import { Component1 } from "components/Component1";
import { Component2 } from "components/Component2";

function App() {
  const [state, setState] = useState("default");
  return (
    <>
      <Component1
        changeState={(v: string) => setState(v)}
      />
      <Component2 option={state} />
    </>
  );
}
export default App;

試したこと

上記の様に、祖先でuseStateを用いて子コンポーネントに状態を渡し、
各子コンポーネントを直接呼び出してレンダリングしてみましたが、
index.tsxの<Component2 />にprops.optionを指定せよと言われてしまいだめでした。

ご指南の程お願い致します。

補足情報（FW/ツールのバージョンなど）

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",

Comments

[hoshi-takanori]

Portal を使うとか？
https://ja.legacy.reactjs.org/docs/portals.html

Answer 1

createPortal使ったことありませんでした、、
勉強不足で申し訳ありません
コメント頂きありがとうございました！