Dropzoneのフックポイントを調査する

import { useState, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'

import logo from './logo.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const onDrop = useCallback(acceptedFiles => {
    setCount((count) => count + 1);
    console.log(acceptedFiles);
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
  const updateCount = () => {
    setCount((count) => count + 100);
  }

  return (
    <div className="App">
      <header className="App-header">
	<p>count is: {count}</p>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {
            isDragActive ?
              <p>Drop the files here ...</p> :
              <p>Drag 'n' drop some files here, or click to select files</p>
          }
        </div>
	<input type="submit" onClick={updateCount} />
      </header>
    </div>
  )
}

export default App