[ENHANCEMENT] I wanHow could I disable the file piker and drag and drop from react dropzone which some file during uploading t a new feature

[ppmm-20231119]

g(true)

    const progressInterval = startSimulatedProgress()

    {/* handle file uploading */ }
    const res = await startUpload(acceptedFile)

    if (!res) {

      setIsUploading(false)
      setCanAcceptFile(true)

      return toast({
        title: "Something went wrong",
        description: "Please try again later",
        variant: "destructive"
      })
    }

    const [fileResponse] = res

    const key = fileResponse?.key

    if (!key) {

      setIsUploading(false)
      setCanAcceptFile(true)

      return toast({
        title: "Something went wrong",
        description: "Please try again later",
        variant: "destructive"
      })
    }

    clearInterval(progressInterval)
    setUploadProgress(100)
    setIsUploading(false)
    setCanAcceptFile(true);
    setShowDeleteFileBtn(true)


  }}>
    {({ getRootProps, getInputProps, acceptedFiles }) => (
      <div {...getRootProps()} className='border h-64 m-4 border-dashed border-gray-300 rounded-lg'>
        <div className="flex items-center justify-center h-full w-full">
          <label htmlFor="dropzone-file" className="flex flex-col items-center justify-center w-full h-full rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
            <div className="flex flex-col items-center justify-center pt-5 pb-6">
              <FaCloudUploadAlt className="h-10 w-10 text-zinc-500 mb-2" />
              <p className="mb-2 text-sm text-zinc-700">
                <span className="font-semibold">
                  Click to upload
                </span>{' '}
                or drag and drop
              </p>
              <p className="text-xs text-zinc-500">TXT flle size is up to 4MB</p>
            </div>


            {uploadProgress === 100 ? (
              <div className="max-w-xs bg-white flex items-center rounded-md overflow-hidden outline outline-[1px] outline-zinc-200 divide-x divide-zinc-200">
                <div className="px-3 py-2 h-full grid place-items-center">
                  <FaFileLines className="h-4 w-4 text-cyan-500" />
                </div>
                <div className="px-3 py-2 h-full text-sm truncate">
                  {acceptedFiles[0].name}
                </div>
                {showDeleteFileBtn && (
                  <div className="px-3 py-2 h-full grid place-items-center">
                    <RxCross1
                      className="h-4 w-4 text-red-500 cursor-pointer"
                      onClick={() => {
                        setIsUploading(false);
                        setUploadProgress(0);
                        setIsConvertButtonDisabled(true);
                      }}
                    />
                  </div>
                )}
              </div>
            ) : acceptedFiles && acceptedFiles[0] ? (
              <div className="max-w-xs bg-white flex items-center rounded-md overflow-hidden outline outline-[1px] outline-zinc-200 divide-x divide-zinc-200">
                <div className="px-3 py-2 h-full grid place-items-center">
                  <FaFileLines className="h-4 w-4 text-cyan-500" />
                </div>
                <div className="px-3 py-2 h-full text-sm truncate">
                  {acceptedFiles[0].name}
                </div>
              </div>
            ) : null}


            {isUploading ? (
              <div className="w-full mt-4 max-w-xs mx-auto">
                <Progress value={uploadProgress} className="h-1 w-full bg-zinc-200" />
                {uploadProgress === 100 ? (
                  <div className="flex gap-1 items-center justify-center text-sm text-zinc-700 text-center pt-2">
                    <Loader2 className="h-3 w-2 animate-spin" />
                    Converting...
                  </div>
                ) : null}
              </div>
            ) : null}


            <input {...getInputProps()} type="file" id="dropzone-file" className="hidden" onClick={e => e.stopPropagation()} />

          </label>
        </div>
      </div>
    )}
  </Dropzone>
}


export const UploadTXTTOPDFButton: React.FC<UploadTXTTOPDFButtonProps> = ({ label, fontSize, marginTop }) => {

  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [isConvertButtonDisabled, setIsConvertButtonDisabled] = useState<boolean>(true);

  const buttonStyle = {
    fontSize: fontSize || '0.85em',
    marginTop: marginTop
  };

  return (
    <Dialog
      open={isOpen}
      onOpenChange={(v) => {
        if (!v) {
          setIsOpen(v)
          setIsConvertButtonDisabled(true)
        }
      }}>

      <DialogTrigger onClick={() => setIsOpen(true)} asChild>
        <button className={styles.button} style={buttonStyle}>{label}</button>
      </DialogTrigger>

      <DialogContent>
        <UploadDropzone isConvertButtonDisabled={isConvertButtonDisabled} setIsConvertButtonDisabled={setIsConvertButtonDisabled} />
        <Button className="mx-4 font-bold uppercase select-none bg-[#2e3657] hover:bg-[#3d4565]" disabled={isConvertButtonDisabled}>Convert</Button>
      </DialogContent>
    </Dialog >
  );
};

This is my code , I would like to know how could I disable the file piker and drag and drop from react dropzone which some file during uploading ?