How to use the react-dropzone.useDropzone function in react-dropzone

function Upload(props) {
  const onDrop = useCallback(acceptedFiles => {
    props.setFilename(acceptedFiles[0].name);
    props.callback(acceptedFiles);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div>
      <input>
      {isDragActive ? <p>upload or drag STL files</p> : <p>upload STL files</p>}
      {props.filename ? <p>Filename: {props.filename}</p> : null}
    </div>
  );
}

function Wrapper() {
  const [maki, setMaki] = React.useState(null);
  const onDrop = React.useCallback(async acceptedFiles => {
    if (acceptedFiles.length !== 1) {
      alert("Only drop one file at a time");
      return;
    }
    const file = acceptedFiles[0];
    const arrayBuffer = await readFileAsArrayBuffer(file);
    setMaki(arrayBuffer);
    // Do something with the files
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  return (
    <div style="{{">
      {maki == null ? (
        &lt;&gt;
          <h1 style="{{">
            Drop a .maki file here to debug
          </h1>
          <input type="file">
        </div>

if (response.status !== 200) {
      // The upload failed, so let's notify the caller.
      setUploading(false)
      onError && onError()
      return
    }
    // Let the caller know that the upload is done, so that it can send the URL
    // to the backend again, persisting it to the database.

    setUploading(false)
    onUploadReady && onUploadReady()
  }

  return {
    ...useDropzone({
      accept: "image/*",
      disabled: typeof presignedUploadUrl !== "string",
      onDrop,
    }),
    uploading,
  }
}

setFile(url)
  })

  // Update source
  React.useEffect(() => {
    setSource(query.src || file)
  }, [file, query])

  const onDrop = React.useCallback(
    acceptedFiles => {
      handleFileChange(acceptedFiles)
    },
    [handleFileChange]
  )

  const { getRootProps, isDragActive } = useDropzone({ onDrop })

  return !source ? (
    
      <section>
        {!isDragActive ? (
          <div>
            <div>
              <b>Select</b> comic book or <b>drop</b> it here
            </div>
            <div>
              
              <button>Try example</button>
            </div>
            <div>
              <b>Enter</b> a valid url of the comic book
            </div></div></section>

function Upload(props) {
  const onDrop = useCallback(acceptedFiles => {
    props.setFilename(acceptedFiles[0].name);
    props.callback(acceptedFiles);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div>
      <input>
      {isDragActive ? <p>upload or drag STL files</p> : <p>upload STL files</p>}
      {props.filename}
    </div>
  );
}

const [columnKey, setColumnKey] = useState();
  const [csvData, setCsvData] = useState([]);
  const onDrop = useCallback(async acceptedFiles => {
    const file = acceptedFiles[0];
    var reader = new FileReader();
    reader.onload = function(event: any) {
      const csvString = event.target.result;
      parse(csvString, {}, function(err, output) {
        const keys = output.shift();
        setCsvData(output);
        setCsvKeys(keys);
      });
    };
    reader.readAsText(file);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    multiple: false,
  });
  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
    setKeyPairs([]);
    setCsvKeys([]);
    setCsvKey(null);
    setColumnKey(null);
  }
  function handleImport() {
    const newDocs = csvData.map((row: any[]) => {

data: b64data,
          };
          return fileData;
        })
        .then(fileData => {
          props.onFilePicked({ file: fileData });
        });
    });
  }, []);
  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragReject,
    isDragAccept,
  } = useDropzone({ onDrop });

  const icon = isDragReject ? "#ico36_close" : "#illu_drag_here";

  return (
    
      <div>
        </div>

export function MultiImageUpload(props) {
  const { files, setFiles } = props;
  const {
    isDragActive,
    isDragReject,
    getRootProps,
    getInputProps
  } = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      setFiles([
        ...files,
        ...acceptedFiles.map(file =>
          Object.assign(file, {
            preview: URL.createObjectURL(file)
          })
        )
      ]);
    }
  });

  const thumbs = () => {
    const removeThumbnail = index => {
      const newList = files.filter((file, i) => files[index] !== file);

const options = { type: "application/octet-stream" }
    const blob = new Blob(blobParts, options)
    FileSaver.saveAs(blob, filename)
  }
  const onPlayClick = () => {
    sunvox.sv_play_from_beginning(0)
  }
  const onStopClick = () => {
    sunvox.sv_stop(0)
  }
  const onProjectOptionsChange = (event: ChangeEvent) => {
    const value = event.target.value || "{}"
    setProjectOptions(value)
  }

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

  return (
    <div>
      <h1>sunvox.audio</h1>
      <h2>What is this?</h2>
      <p>
        This is an early, work-in-progress demonstration of the SunVox and Radiant
        Voices libraries for JavaScript.
      </p>
      <h3>Project loader</h3>
      <p>
        Load a SunVox project (*.sunvox file) from your computer, and it will play it
        back in SunVox and load the project in Radiant Voices:
      </p>
      <div>
        <input></div></div>

}: {
    handleOnDrop(files: File[]): void
    disabled?: boolean
    multiple?: boolean
}) {
    const onDrop = useCallback(acceptedFiles => handleOnDrop(acceptedFiles), [
        handleOnDrop
    ])

    const {
        acceptedFiles,
        getRootProps,
        getInputProps,
        isDragActive,
        isDragReject
    } = useDropzone({ onDrop })

    const files = acceptedFiles.map((file: any) => (
        <li>
            {file.path} - {formatBytes(file.size, 0)}
        </li>
    ))

    return (
        &lt;&gt;
            {acceptedFiles.length &gt; 0 ? (
                <aside>
                    <ul>{files}</ul>
                </aside>
            ) : (