MyDropzone does work

frontend/src/App.tsx

@@ -2,7 +2,8 @@
 // import Homepage from './components/Homepage';
 // import Homepage2 from './components/Homepage2';
 // import SocketIO from './components/SocketIO';
-import Upload from './components/Upload';
+// import Upload from './components/Upload';
+import MyDropzone from './components/MyDropzone';
 import './styles/App.scss';
 
 function App() {
@@ -15,7 +16,8 @@ function App() {
         {/* <Homepage/> */}
         {/* <Homepage2/> */}
         {/* <SocketIO/> */}
-        <Upload />
+        {/* <Upload /> */}
+        <MyDropzone />
       </header>
     </div>
   );

frontend/src/components/MyDropzone.tsx

@@ -0,0 +1,23 @@
+import {useCallback} from 'react'
+import {useDropzone} from 'react-dropzone'
+
+function MyDropzone() {
+  const onDrop = useCallback((acceptedFiles: any) => {
+    // Do something with the files
+    console.log(acceptedFiles)
+  }, [])
+  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
+
+  return (
+    <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>
+  )
+}
+
+export default MyDropzone