Property 'render' does not exist on type 'typeof import("")')

Question

I am trying to downgrade from react 18 to 17. First I ran the npm install react@17.0.2 react-dom@17.0.2 . Then I also tried changing the version of react and react-dom in dependencies inside package.json and then run npm install again but in both cases the index.tsx file is giving me an error. Because of index.tsx differences of react 18 and 17 I changed my code from react 18:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './app/layout/styles.css';
import App from './app/layout/App';
import reportWebVitals from './reportWebVitals';
import 'react-toastify/dist/ReactToastify.min.css';
import { store, StoreContext } from './app/stores/store';
import { BrowserRouter, Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <StoreContext.Provider value={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StoreContext.Provider>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

to react 17:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './app/layout/styles.css';
import App from './app/layout/App';
import reportWebVitals from './reportWebVitals';
import 'react-toastify/dist/ReactToastify.min.css';
import { store, StoreContext } from './app/stores/store';
import { BrowserRouter, Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

ReactDOM.render(
  <StoreContext.Provider value={store}>
    <Router history={history}>
      <App />
    </Router>
  </StoreContext.Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

but my render from reactDOM.render(), is giving me this error:

Property 'render' does not exist on type 'typeof import("C:/Users/Lenovo/Desktop/Student/client-app/node_modules/@types/react-dom/client")'.ts(2339)

Here is my package.json dependencies file:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.48",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@types/react-router-dom": "^5.3.2",
    "axios": "^0.27.2",
    "mobx": "^6.6.1",
    "mobx-react-lite": "^3.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^4.0.1",
    "react-toastify": "^6.2.0",
    "semantic-ui-react": "^2.1.3",
    "typescript": "^4.7.4",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  }