TypeScript error on <style> with attributes `global` and `jsx`

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #137-Ubuntu SMP Wed Jun 15 13:33:07 UTC 2022
Binaries:
  Node: 16.14.2
  npm: 8.7.0
  Yarn: 1.22.5
  pnpm: N/A
Relevant packages:
  next: 12.2.1-canary.2
  eslint-config-next: N/A
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

In my project when I try to create a component with global style I get a TypeScript error:

// Test.tsx

export function Test() {
  return (
    <div>
      <style global jsx>{``}</style>
      {/*    ~~~~~~    */}
    </div>
  )
}

Type '{ children: string; global: true; jsx: true; }' is not assignable to type 'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.
  Property 'global' does not exist on type 'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.ts(2322)

And what seems strange is that styled-jsx@5.0.2 seems to correctly define extension of react type with:

declare module 'react' {
  interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
    jsx?: boolean
    global?: boolean
  }
}

But for some reason, this seems not to be used by TypeScript.

Expected Behavior

No TS error.

Link to reproduction

https://codesandbox.io/s/musing-mcnulty-i2crqc?file=/components/Test.tsx

To Reproduce

Just hover the global attribute in order to see the TypeScript error.

[tangye1234]

file: ./node_modules/next/index.d.ts

If I changed the selected line into

/// <reference path="./dist/styled-jsx-types/global.d.ts" />

then all problems are addressed.

[Chamberlainfrancis]

This issue still exists with v12.2.5 although I am not using typescript, I still got this error during build Unknown property 'jsx' found on here <style jsx>{ }</style>