Gatsby Image importing createRoot from react-dom instead of react-dom/client

[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

Appears on React 18 RC 1 or later.

Reproduction Link

https://github.com/mwskwong/gatsby-image-react-rc-1

Steps to Reproduce

1. Genearte a Gatsby site using any template
2. Upgrade React to 18.0.0-rc.1 or later
3. Use any components in gatsby-plugin-image

Expected Result

No error prompted

Actual Result

React complains createRoot is being imported from the wrong path.

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.3 => 4.9.3 
    gatsby-plugin-image: ^2.9.1 => 2.9.1 
    gatsby-plugin-sharp: ^4.9.1 => 4.9.1 
    gatsby-source-filesystem: ^4.9.1 => 4.9.1 
    gatsby-transformer-sharp: ^4.9.0 => 4.9.0

Config Flags

No response