How are you supposed to satisfy refs when not forwarding to a pure DOM node?

function Example() {
  let controller: { open(): void } | undefined
  return <>
      <button onClick={() => controller?.open()}>Open</button>
      <Controllable ref={controller} />
  </>;
}

function Controllable(props: { ref: Ref<{ open(): void } | undefined> }) {
  let dialog: HTMLDialogElement | undefined;
  function open() {
    // do some stuff
    dialog?.showModal();
  }
  // How do I satisfy props.ref here properly? Or is this the way
  // and is there a way to eliminate the `| undefined` in the type of the ref?
  createRenderEffect(() => {
    typeof props.ref === "function" ? props.ref({ open }) : console.log("no ref")
  });
  return <dialog ref={dialog}>Hello</dialog>;
}

function Example() {
  let controller: { open(): void } | undefined
  return <>
      <button onClick={() => controller?.open()}>Open</button>
      <Controllable ref={controller} />
  </>;
}

function Controllable(props: { ref: Ref<{ open(): void } | undefined> }) {
  let dialog: HTMLDialogElement | undefined;
  function open() {
    // do some stuff
    dialog?.showModal();
  }
  // How do I satisfy props.ref here properly? Or is this the way
  // and is there a way to eliminate the `| undefined` in the type of the ref?
  createRenderEffect(() => {
    typeof props.ref === "function" ? props.ref({ open }) : console.log("no ref")
  });
  return <dialog ref={dialog}>Hello</dialog>;
}