【React18】ローカルストレージに値を追加する方法

ローカルストレージに値を追加したくて検索→
出てきた記事を参考にしながら実装したけど、なにやらエラーが・・

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

deepl翻訳↓
警告 ReactDOM.renderはReact 18でサポートされなくなりました。代わりに createRoot を使用してください。新しい API に切り替えるまで、アプリは React 17 を実行しているかのように動作します。

どうやら私の参考にした記事の情報は古く、renderの方法が17→18で変わったようです。
今後のためにここにメモしておきます。

エラーが出る書き方
エラーの出ない書き方
1. 公式ドキュメントはこちら

エラーが出る書き方

// 描画元の親要素を取得
const ulElement = document.getElementById("ulElement");

// 子要素を追加
// ここでエラーが出てたっぽい
const li = React.createElement(
      "li",
      { id: "the-text", className: "pastScores" },
      [`${scoreItem.timeDate} => ${scoreItem.pastScore}`]
    );

// 要素を描画
rootUl.render(
  <li className=”pastScore”>
    {`${scoreItem.timeDate} => ${scoreItem.pastScore}`}
  </li>
);

エラーの出ない書き方

// 描画元の親要素を取得
const ulElement = document.getElementById(“ulElement”);
// 要素を生成
const rootUl = createRoot(ulElement);
 
// 要素を描画
rootUl.render(
  <li className=”pastScore”>
    {`${scoreItem.timeDate} => ${scoreItem.pastScore}`}
  </li>
);