render twice when i use react 18

[757566833]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 14.17.3
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.19
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

chrome 102.0.5005.62

How are you deploying your application? (if relevant)

next dev

Describe the Bug

render twice

Expected Behavior

render once

To Reproduce

1. download file:///D:/Downloads/material-ui-master.zip
2. cd examples\nextjs-with-typescript
3. change the next version to 12.1.5 ( because 12.1.6 CSS generation regression #36675)
4. yarn install
5. add effect in pages/index.tsx

const Home: NextPage = () => {
    useEffect(()=>{
        console.log("effect")
    },[])
...
}

6. yarn dev
7. chrome dev tools console two effect appear

I also tested 12.1.7-canary.18 and he has the same problem
when i change react to 17 the problems will not arise

[SukkaW]

Duplicate as #36920

[balazsorban44]

Please see #35822

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.