How to solve Invalid hook call error in a project consuming a react app package

I am consuming a component as a package. Currently I have it linked with npm link so I can see the changes on my machine. I keep getting this: "Uncaught Error: Invalid hook call" error. I started troubleshooting and found quite a few posts that said that it might be happening because of multiple React instances. I have validated with methods described here: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react that I have only one copy of React. Also, react and react-dom have the same versions. Next was that may be there is an issue with linking, so I ran npm link path-to-consumer-project/node-modules/react . I believe this was alsoto solve the issue of two React copies which I can already see with the first method described on the link above but I still went ahead and did it anyways.

So then I started to troubleshoot the code and started removing all hooks. I have narrowed it down to it's simplest form. I have this one hook left useEffect and I'm still getting the same error. (Error points that's where the error occurred). Can someone please advise why this simple stripped down code still gives the same error. I'm hoping once I solve this issue, I will be able to put back in rest of the code and it will still work. Appreciate if anyone can provide some guidance.

Main app component:

const App = () => (
  <Datalist />
);
export default App;

Child component with the hook:

const Datalist = () => {
    useEffect(() => {
      console.log('testing....')
    }, []);
    
    return(
      <>
        <div>Testing</div>
      </>
    )
  }
export default Datalist;