What's wrong in my index.js file that raise me this error react-dom.development.js?

Question

when I check the console I get :

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

I'm using "react-dom": "^18.0.0", "react-router-dom": "^6.3.0". But then when I use createRoot in my index.js I don't have the error but some functionnalities are not working (such as this issue that I get here)

What I have:

import "./index.css";
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

What I tried :

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Answer 1

import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementbyId("root")
root.render(<App/>);

you never imported reactDOM.