importing ConnectButton from web3uikit gives Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

I am using nextjs along with tailwind css and a bunch of other libraries like web3uikit. the app work totally fine but as soon as I import ConnectButton from web3uikit and use it in the sidebar component, it gives me the following error: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Here's the link to the github repo, just cloning and install the dependencies would help you in setting up the project and then npm run dev.

Link: https://github.com/oneknucklehead/marketplace-web3