Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

I am trying to make a small example react project that uses this npm package drag and drop file picker: https://www.npmjs.com/package/@yelysei/react-files-drag-and-drop

I made a fresh react project with npx create-react-app my-app.

I installed the package and added the filesDragAndDrop component to my App.js file like so:

import logo from './logo.svg';
import './App.css';
import FilesDragAndDrop from '@yelysei/react-files-drag-and-drop';

function App() {
  return (
    <div >
      welcome

      <FilesDragAndDrop
        onUpload={(files) => console.log(files)}
        count={3}
        formats={['jpg', 'png', 'svg']}
        containerStyles={{
            width: '200px',
            height: '200px',
            border: '1px solid #cccccc',
        }}
        openDialogOnClick
    >
        <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        }}>
            Drop files here
        </div>
    </FilesDragAndDrop>

    </div>
  );
}

export default App;

When I run my react project, it starts fine with no errors. but when I visit my home page in chrome, I get a bunch of red console errors that prevent the page from loading

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See `https://-f-b.me/-re-act-inv-alid-hook-call` for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1465:1)
    at Object.useState (react.development.js:1496:1)
    at FilesDragAndDrop (index.js:43:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)

I tried to investigate what this error meant on the linked site: https://reactjs.org/warnings/invalid-hook-call-warning.html

running npm ls react-dom i get this:

$ npm ls react-dom
my-app-2@0.1.0 /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
├─┬ @yelysei/react-files-drag-and-drop@1.0.0
│ └── react-dom@16.14.0
└── react-dom@18.1.0

so 2 versions of react-dom, and the other command shows no results:

$ npm ls react-native
my-app-2@0.1.0 /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
└── (empty)

and running npm ls react shows 2 react versions:

my-app-2@0.1.0 /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
├─┬ @yelysei/react-files-drag-and-drop@1.0.0
│ └── react@16.14.0
└── react@18.1.0

is the blocking error I am facing caused by me having multiple react versions installed? or did i configure my component in App.js incorrectly?

KarimMokhtar / react-drag-drop-files

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: #67