How to use dropzone in a single file mode?

I am using react-hooks with dropzone.

So, my code looks something like this:

const onDrop = (acceptedFiles) => {
  console.log(acceptedFiles);
};

const { getRootProps, getInputProps } = useDropzone({ onDrop });
return (
  <div {...getRootProps()} className="dropzone-container">
    <input {...getInputProps()} multiple={false} />
    // My component here
  </div>
)

Now, when I click on the dropzone, I can select only 1 file. That's cool.

But when I drop multiple files on the dropzone, all of them are accepted. I mean in onDrop method, I get all the files in acceptedFiles parameter.

Can someone point why is this happening? Am I doing anything wrong here?

You can pass on multiple: false to useDropzone and it will ignore multiple files on drop and only the first one will be picked

const onDrop = (acceptedFiles) => {
  console.log(acceptedFiles);
};

const { getRootProps, getInputProps } = useDropzone({ onDrop, multiple: false });
return (
  <div {...getRootProps()} className="dropzone-container">
    <input {...getInputProps()}/>
    // My component here
  </div>
)