I am building a little local dev/testing/documentation environment for some components which are used across different projects and so want to create them as individual npm packages.

Everything was working perfectly until I tried to use useState() in one of the components. Add this created the following errors:

Invalid hook call. Hooks can only be called inside of the body of a function component.

TypeError: Cannot read properties of null (reading 'useState')

I feel this is strange and I can't figure out what is causing it. I also tested with other hooks to see if it was just useState that was the problem but others such as useEffect and useRef also have the same problem.

Project structure is:

/components (the components to develop/test/document
    /component-group
        /Component
            index.js
            Component.js
            component.scss
            package.json
/library  (where all the components are developed/tested/documented)
    /component1
    /component2
    /etc (all the components that make up the library)
webpack.config.js
package.json
etc...

Components are imported into the library using a relative path because I don't won't to have to publish them to npm and update the version locally every time a change is made and needs to be tested.

As for the code for the component where useState is causing problems, this is a basic version which still causes problems:

import React, { useState } from 'react';

const TestComponent = () => {

    const [testState, setTestState] = useState("testing");

    return (
        <p>Hello World</p>
    )

}

export default TestComponent

If I comment out the useState line then Hello World is displayed, if I uncomment the line then the errors appear.

Any ideas as to what might be wrong would be really appreciated.

Thank you in advance!