Next.js 在Tailwind modals中未打开输入类型文件

我的问题可能太明显了，但我不知道是什么错了。我尝试使用来自tailwind ui组件的模式，并在其上添加了文件类型的输入

当我打开模式时，一切都很好，但是当我点击输入选择一个文件时，什么都没有发生（我的文件浏览器没有显示）

你知道我应该改变什么吗

这是我的Modal.js

<Transition.Root show={show} as={Fragment}>
  <Dialog
    as='div'
    static
    className='fixed z-10 inset-0 overflow-y-auto'
    open={show}
    onClose={handleModalClose}
  >
    <div className='flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0'>
      <Transition.Child
        as={Fragment}
        enter='ease-out duration-300'
        enterFrom='opacity-0'
        enterTo='opacity-100'
        leave='ease-in duration-200'
        leaveFrom='opacity-100'
        leaveTo='opacity-0'
      >
        <Dialog.Overlay className='fixed inset-0 bg-blue-gray-500 bg-opacity-75 transition-opacity' />
      </Transition.Child>
      <span
        className='hidden sm:inline-block sm:align-middle sm:h-screen'
        aria-hidden='true'
      >
        &#8203;
      </span>
      <Transition.Child
        as={Fragment}
        enter='ease-out duration-300'
        enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
        enterTo='opacity-100 translate-y-0 sm:scale-100'
        leave='ease-in duration-200'
        leaveFrom='opacity-100 translate-y-0 sm:scale-100'
        leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
      >
        <div className='inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6'>
          <div className='hidden sm:block absolute top-0 right-0 pt-4 pr-4'>
            <button
              type='button'
              className='bg-white rounded-md text-purple-400 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500'
              onClick={handleModalClose}
            >
              <span className='sr-only'>Close</span>
              <XIcon className='h-6 w-6' aria-hidden='true' />
            </button>
          </div>
          {children}
        </div>
      </Transition.Child>
    </div>
  </Dialog>
</Transition.Root>

​
接近
{儿童}

下面是我如何调用我的组件

<Modal show={showModal} onClose={() => setShowModal(false)}>
    <input
      id='file-upload'
      name='file-upload'
      type='file'
    />
  </Modal>

setShowModal（false）}>

多谢各位