【React】Warning: ReactDOM.render is no longer supported in React 18.が出た時

結論

create-react-appで自動生成されるコードがReact18に一部対応していないのが原因
src/index.jsxの記述をReact18に対応した書き方に変更してあげればOK

状況

create-react-appでReactアプリの作成
ある程度実装して、、、
ブラウザからdeveloper toolを使用すると、コンソール画面に以下のような警告

コード

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

警告の対象はcreate-react-appで自動生成された以下のコード

src/index.jsx

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

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

// 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: https://bit.ly/CRA-vitals
reportWebVitals();

解決方法

src/index.jsxを以下のように修正

コード

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
const root = createRoot(container);
root.render();

// 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: https://bit.ly/CRA-vitals
reportWebVitals();