Prevent open dialog onClick of a button with react-dropzone

I use react-dropzone to upload files. When files are uploaded, they are stored in an array, which I use to list all items uploaded.

I added a button on the side of each li to delete the specific file from the array.

It works well, but opens a dialog to select a new file each time I delete one.

Is it possible to prevent this behaviour ?

Here is a simplified sandbox. The delete button must only console log, not open dialog : sandbox

Here is the simplified code :

import { useState } from "react";
import "./styles.css";
import Dropzone from "react-dropzone";
import * as React from "react";

export default function App() {
  const [files, setFiles] = useState([{ name: "test" }]);

  const handleDrop = () => {
    console.log("dropped");
  };

  return (
    <div className="App">
      <h1>React Typescript Tailwind CSS started</h1>

      <Dropzone onDrop={handleDrop}>
        {({ getRootProps, getInputProps }) => (
          <div style={{ border: "2px solid black", height: "100px" }}>
            <div>
              <div {...getRootProps()}>
                <input {...getInputProps()} />

                <button>Select a file</button>

                {files && files.length > 0 && (
                  <ul>
                    {files.map((file) => (
                      <li key={file.name} className="relative w-fit">
                        {file.name}
                        <button onClick={() => console.log("delete")}>
                          delete
                        </button>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          </div>
        )}
      </Dropzone>
    </div>
  );
}

1. Set noClick as true to prevent the dialog from opening every time someone clicks on any area inside the div:

const {getRootProps, getInputProps, open} = useDropzone({noClick: true})

2. When you have to open the dialog use this: onClick={open}