How to use styled-components' ThemeProvider in Next.js' _document?

I want to use next.js with styled-components to act as css layer.

If not use Next.js, the React main.ts file looks like:

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import { App } from "~/components/pages/index";
import { theme } from "./theme";

const rootDOM = document.getElementById("root");

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  rootDOM
);

Then the ThemeProvider can be used and the other page can get this css theme.

If use Next.js, I set there sources in the pages/_document.tsx

import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: [
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>,
        ],
      }
    } finally {
      sheet.seal()
    }
  }
}

But how to set or render these items in this file?

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>