How to store JSX element in a signal and render it from other elements

import { render, Portal } from "solid-js/web";
import { createContext, useContext, createSignal, type JSX, type Accessor } from "solid-js";

export type DialogContextValue = {
  openDialog(element: JSX.Element): void;

  closeDialog(): void;
};

export const DialogContext = createContext<DialogContextValue>({
  openDialog() {},
  closeDialog() {},
});

type DialogProviderProps = {
  children: JSX.Element
}

export function DialogProvider(props: DialogProviderProps) {
  const [activeDialog, setActiveDialog] = createSignal<JSX.Element | undefined>(undefined)

  const openDialog = (element: JSX.Element) => {
    setActiveDialog(element)
  }

  const closeDialog = () => {
    setActiveDialog(undefined);
  }

  return (
    <DialogContext.Provider value={{ openDialog, closeDialog }}>
      {props.children}
      {activeDialog && <Portal>{activeDialog()}</Portal>}
    </DialogContext.Provider>
  );
}

function useDialog() { return useContext(DialogContext); }

function App() {
  const dialog = useDialog();
  return <button onClick={() => {
    dialog.openDialog(<button onClick={dialog.closeDialog}>Dialog open. Click to close</button>);
  }}>Open dialog</button>
}