react-cookies usage with react hooks

I'm using react-cookies for cookie management but keep getting the error

"react.development.js:209 Warning: 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.

My Code is below: index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { CookiesProvider } from "react-cookie";



const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode>
        <CookiesProvider>
            <App />
        </CookiesProvider>
    </React.StrictMode>
);

and app.tsx

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { Helmet } from 'react-helmet';
import { useCookies } from "react-cookie";


function App() {
    const [cookies, setCookie] = useCookies(['bid']);
    const query = new URLSearchParams(window.location.search)
    var bid = Number(query.get('bid'));
    if (bid && bid > 0) {
        //setCookie("bid", bid)
    }
    else {
        //if (cookies && cookies.bid > 0) {
        //    bid = cookies.bid;
        //}
    }

    const [Bookmaker, setBookmaker] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch("http://localhost:5242/Bookmaker?bid=58", { method : "GET"})
            .then(response => response.json())            
            .then(data => setBookmaker(data))
    }, []);

    return (
        <div className="App">
            <Helmet>
            
            </Helmet>
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.tsx</code> and save to reload.
                </p>
                <a className="App-link" href="https://reactjs.org" target="_blank"              rel="noopener noreferrer">
                    Learn React
                </a>
            </header>
        </div>
    );
}


export default App;

if i comment out the line 'const [cookies, setCookie] = useCookies(['bid']);' to create the cookie objects in my app.tsx file and run everything works fine and my api returns data.

I've followed the invalid hook link in the error and get the following when checking my react environment

npm ls react
tempProjectCreation@0.1.0 ....\repos\reactproject\React
+-- @testing-library/react@13.4.0
| `-- react@18.2.0 deduped
+-- react-dom@18.2.0
| `-- react@18.2.0 deduped
+-- react-scripts@5.0.1
| `-- react@18.2.0 deduped
`-- react@18.2.0

npm ls react-dom
tempProjectCreation@0.1.0 ....\repos\reactproject\React
+-- @testing-library/react@13.4.0
| `-- react-dom@18.2.0 deduped
`-- react-dom@18.2.0

The fact that my api is hit with my fetch and data gets populated means hooks are set up and working in my project fine hopefully so not sure what the problem is. Any help would be appreciated.

Changing to "universal-cookie" worked for me, following the suggestion of https://www.reddit.com/r/react/comments/11byy7t/comment/jbjedpu/

import Cookies from "universal-cookie";

function App() {

    const cookies = new Cookies();
    ...
}