<p>When I set up and use the <code>Provider</code> in <code>root.render</code>, it shows me this error: </p> <blockquote> <p>Warning: Invalid hook call. Hooks can only be called internally The body of the function component. This may happen in one of the Here’s why: </p> <ol> <li>Your React and renderer versions may not match (e.g. React DOM)</li> <li>You may be violating Hooks rules</li> <li>You may have multiple copies of React in the same app and TypeError is not caught: Cannot read property of null (read 'useMemo') </li> </ol> </blockquote> <p>It's just for the <code>Provider</code> component, if I don't call it I don't get this error. </p> <pre class="brush:php;toolbar:false;">import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <Provider> <App /> </Provider> ); reportWebVitals();</pre> <p>I uninstalled the redux and npm packages and installed them using the latest versions, but I'm having the same problem. Some say it could be because there are the same names in both packages, which confuses the computer, but I don't think so. </p>

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from "./path/to/store"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();