Inertia.js&ReactでcreateRootを使って警告を回避する

最新版のReact18とInertiaを用いてLaravelとReactを共存させた時、consoleに以下のような警告が出ました。

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

自分がこの警告に遭遇したとき、Reactコンポーネントの処理がなぜかページの読み込み時に走らないという問題に悩まされていました。警告に従って適切にコードを変更することで、この問題は解決しました。
公式ドキュメントに従って、以下のように記載しているときにこの警告が発生します。必要な部分は適宜読み替えてください。

resources/js/app.jsx

import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import Layout from "@/js/components/Layout";

createInertiaApp({
    resolve: (name) =>
        resolvePageComponent(
            `./pages/${name}.jsx`,
            import.meta.glob("./pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        render(
            <Layout>
                <App {...props} />
            </Layout>,
            el
        );
    },
});

警告先のリンクに従って、app.jsxを以下のように書き換えます。

resources/js/app.jsx

import React from "react";
import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import "@/styles/globals.scss";
import Layout from "@/js/components/Layout";

createInertiaApp({
    resolve: (name) =>
        resolvePageComponent(
            `./pages/${name}.jsx`,
            import.meta.glob("./pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        createRoot(document.getElementById("app")).render(
            <Layout>
                <App {...props} />
            </Layout>
        );
    },
});

これで、警告が現れなくなるはずです。
ちなみに、自分はページの初回読み込み時に、SyntaxHighlighterコンポーネントがなぜか動作せず、困っていました(リロードするとうまく動きました)。上記のように最新版に対応させると、うまく動くようになりました。