ReactDOM.render is used instead of createRoot in DEV build

[mwskwong]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

In DEV build, if React 18 (any minor versions) is used, render is being called instead of the new API createRoot.
Doesn't seem to affect PROD build.

Reproduction Link

https://github.com/mwskwong/react-18-rc-2-repo

Steps to Reproduce

1. Create a Gatsby project using any templates
2. Upgrade React to version 18, minor version doesn't matter here.
3. Run in DEV build and observe the console in the browser

Expected Result

createRoot should be used in DEV build.

Actual Result

render is used in DEV build instead.

Environment

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.2
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.36)
  npmPackages:
    gatsby: ^4.9.2 => 4.9.2

Config Flags

No response