Preserving the mount state in radix dialog

[sagar-niural]

Is there anyway that we can preserve the mounted state in radix dialog.
I dont want my form values clear when my dialog closes but by default it unmounts all the children inside DialogContent.
Trying to implement something like destroyOnClose so that it controls whether to unmount the children or not

[bytesagar]

const Modal = ({
  trigger,
  title,
  description,
  children,
  primaryButton,
  secondaryButton,
  width,
  open,
  side,
  onClose,
  defaultOpen,
  contentLayout = "padded",
  footerLeft,
  modalContentClassName,
  closeOnOverlayClick = true,
  preserveOnClose,
}: ModalProps): React.JSX.Element => {
  return (
    <ModalRoot open={open} onOpenChange={onClose} defaultOpen={defaultOpen}>
      {trigger && <ModalTrigger asChild>{trigger}</ModalTrigger>}

      <ModalContent
        width={width}
        side={side}
        closeOnOverlayClick={closeOnOverlayClick}
      >
        <>
          <ModalHeader
            className={cn({
              "min-h-[60px]": !description,
              "min-h-[77px] max-h-[77px]": description,
            })}
          >
            <div className="flex gap-4 items-center h-full">
              <div>
                <ModalTitle>{title}</ModalTitle>
                {description && (
                  <ModalDescription>{description}</ModalDescription>
                )}
              </div>
            </div>
          </ModalHeader>
          <div
            className={cn(
              { "p-4": contentLayout === "padded" },
              "flex-1",
              modalContentClassName,
            )}
          >
            {children}
          </div>

          {footerLeft || primaryButton || secondaryButton ? (
            <ModalFooter>
              <div className="">{footerLeft}</div>
              <div className="gap-3 flex justify-end items-center">
                {secondaryButton && (
                  <Button shade="neutral" {...secondaryButton} />
                )}
                {primaryButton && <Button {...primaryButton} />}
              </div>
            </ModalFooter>
          ) : (
            <div className="h-2" />
          )}
        </>
      </ModalContent>
    </ModalRoot>
  );
};

This is how I am using dialog. Now how do i preserve children state when preserveOnClose is true. By default it unmounts the children when modal closed