this is my modal structure

<Dialog.Root open={isOpen} defaultOpen={isOpen} onOpenChange={onChange}>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-neutral-900/90 backdrop-blur-sm" />
    <Dialog.Content
      className="fixed drop-shadow-md border border-neutral-700 top-[50%] left-[50%] max-h-full h-full md:h-auto 
  md:max-h-[85vh] w-full md:w-[90vw] md:max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-neutral-800 p-[25px] focus:outline-none"
    >

      <Dialog.Close asChild>
        <div className=" text-neutral-400 hover:text-white absolute top-[10px] right-[10px] inline-flex h-[25px] appearance-none items-center justify-center rounded-full focus:outline-none">
          <IoMdClose />
        </div>
      </Dialog.Close>

      <Dialog.Title className="text-white text-2xl font-poppins font-bold text-center">
        {title}
      </Dialog.Title>

      <Dialog.Description className="text-gray-400 text-lg font-poppins font-semibold mt-2 text-center">
        {description}
      </Dialog.Description>

      <div >
        {children}
      </div>

    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

and this is my Upload Modal where i try to load my children

<Modal
        isOpen={true}
        onChange={() => {}}
        title="Upload Track"
        description="Upload a new track to the database."
    >
        <div>
            <input
                type="file"
                name="file"
                id="file"
                className="hidden"
                accept=".mp3"
            />
            <label
                htmlFor="file"
                className="bg-green-500 text-white font-bold py-2 px-4 rounded-full"
            >
                Choose File
            </label>
        </div>
    </Modal>

i don t understand why modal doesn t load my children, a tried to put a condition to see if my children is loading and it s give my back a undifined object