How to use the styled-jsx/server function in styled-jsx

let css: string;
    // It might be undefined, e.g. after an error.
    if (pageContext) {
      css = pageContext.sheetsRegistry.toString();
    }

    return {
      ...page,
      theme,
      pageContext,
      // Styles fragment is rendered after the app and page rendering finish.
      styles: (

const sheets = new ServerStyleSheets();
      const originalRenderPage = ctx.renderPage;
      ctx.renderPage = () =>
        originalRenderPage({
          // wrap Jss context
          enhanceApp: App => props => sheets.collect(),
        });

      // get props after override the renderPage to get jss props
      const superProps = await super.getInitialProps(ctx);

      // push to head instead of override styles
      superProps.head.push(
        
          {sheets.getStyleElement()}
          {flush() || null}
        ,
      );

      return {
        ...superProps,
      };
    }

});

  return {
    ...page,
    pageContext,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: (

const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: (
      
        {sheets.getStyleElement()}
        {flush() || null}
      
    ),
  };
};

static getInitialProps ({ renderPage }) {
    const {html, head, errorHtml, chunks} = renderPage()
    const styles = flush()
    return {html, head, errorHtml, chunks, styles}
  }

static getInitialProps ({ renderPage }) {
    const {html, head, errorHtml, chunks} = renderPage()
    const styles = flush()
    return { html, head, errorHtml, chunks, styles }
  }

const originalRenderPage = ctx.renderPage;

      ctx.renderPage = () => {
        return originalRenderPage({
          enhanceApp: App => props => sheets.collect(),
        });
      };

      const initialProps = await Document.getInitialProps(ctx);

      return {
        ...initialProps,
        styles: (
          <>
            {sheets.getStyleElement()}
            {flush() || null}
          
        ),
      };
    }

static async getInitialProps(context) {
    const props = await super.getInitialProps(context);
    const { req: { locale, localeDataScript } } = context;
    const { html, head, errorHtml, chunks } = context.renderPage();
    const styles = flush();
    return { html, head, errorHtml, chunks, styles, locale, localeDataScript };
  }

static async getInitialProps({ renderPage }) {
    const page = renderPage();
    const styles = renderStatic(() => page.html);
    return {
      ...page,
      ...styles,
      jsxStyleCss: flush(),
    };
  }

static getInitialProps(context: Object) {
    const renderPage = context.renderPage;
    const { html, head, errorHtml, chunks } = renderPage();
    const styles = flush();
    return { html, head, errorHtml, chunks, styles };
  }