Pass context to another root (createRoot)

export interface ControlProps {
  className?: string;
  position: ControlPosition;
  children?: React.ReactNode;
}

function Control({ className, position, children }: ControlProps) {
  const context = useContext(MapContext);

  const [root, setRoot] = useState<Root | null>(null);

  useEffect(() => {
    const el = document.createElement("div");
    el.className = `maplibregl-ctrl maplibregl-ctrl-group ${className}`;
    const root = createRoot(el);
    setRoot(root);

    const { map } = context;

    const ctrl: IControl = {
      onAdd() {
        return el;
      },
      onRemove() {
        return el;
      },
    };

    map.addControl(ctrl, position);

    return () => {
      setTimeout(() => root.unmount());
      map.removeControl(ctrl);
      el.remove();
    };
  }, [context, position, className]);

  const routerContext = getRouterContext();
  const router = useRouter();

  useEffect(() => {
    if (root) {
      // Need to wrap this children node with the app's router context
      root.render(children);
    }
  }, [root, children, routerContext, router]);

  return null;
}