Repository: material-ui
Issue: [examples/remix-with-typescript] React 18 version example is required
Labels: ready to take,examples

### Current behavior 😯

A function called `renderToPipeableStream()` is used in `entry.server.ts` of remix 1.7.0 using react 18.2.0. However, this part is not reflected in the remix example of mui. Can you please reflect it?

```ts
// npx create-remix@latest (at 2022-09-02)
// app/entry.server.tsx

import { PassThrough } from "stream";
import type { EntryContext } from "@remix-run/node";
import { Response } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { renderToPipeableStream } from "react-dom/server";

const ABORT_DELAY = 5000;

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  return new Promise((resolve, reject) => {
    let didError = false;

    const { pipe, abort } = renderToPipeableStream(
      <RemixServer context={remixContext} url={request.url} />,
      {
        onShellReady: () => {
          const body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              headers: responseHeaders,
              status: didError ? 500 : responseStatusCode,
            })
          );

          pipe(body);
        },
        onShellError: (err) => {
          reject(err);
        },
        onError: (error) => {
          didError = true;

          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}
```

```ts
// https://github.com/mui/material-ui/blob/master/examples/remix-with-typescript/app/entry.server.tsx

import * as React from 'react';
import { renderToString } from 'react-dom/server';
import { RemixServer } from 'remix';
import type { EntryContext } from 'remix';
import createEmotionCache from './src/createEmotionCache';
import theme from './src/theme';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';
import createEmotionServer from '@emotion/server/create-instance';

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
) {
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

  const MuiRemixServer = () => (
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <RemixServer context={remixContext} url={request.url} />
      </ThemeProvider>
    </CacheProvider>
  );

  // Render the component to a string.
  const html = renderToString(<MuiRemixServer />);

  // Grab the CSS from emotion
  const { styles } = extractCriticalToChunks(html);

  let stylesHTML = '';

  styles.forEach(({ key, ids, css }) => {
    const emotionKey = `${key} ${ids.join(' ')}`;
    const newStyleTag = `<style data-emotion="${emotionKey}">${css}</style>`;
    stylesHTML = `${stylesHTML}${newStyleTag}`;
  });

  // Add the Emotion style tags after the insertion point meta tag
  const markup = html.replace(
    /<meta(\s)*name="emotion-insertion-point"(\s)*content="emotion-insertion-point"(\s)*\/>/,
    `<meta name="emotion-insertion-point" content="emotion-insertion-point"/>${stylesHTML}`,
  );

  responseHeaders.set('Content-Type', 'text/html');

  return new Response(`<!DOCTYPE html>${markup}`, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}
```

### Expected behavior 🤔

I hope that the contents mentioned in 'Current behavior' are reflected.

### Steps to reproduce 🕹

There are no special reproduction steps.

### Context 🔦

As of now (2022-09-02) I want to use mui in the remix of the latest version (1.7.0).

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  System:
    OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
  Binaries:
    Node: 14.20.0 - ~/.nvm/versions/node/v14.20.0/bin/node
    Yarn: Not Found
    npm: 6.14.17 - ~/.nvm/versions/node/v14.20.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: 11.10.4 => 11.10.4 
    @emotion/styled: 11.10.4 => 11.10.4 
    @mui/base:  5.0.0-alpha.95 
    @mui/core-downloads-tracker:  5.10.3 
    @mui/icons-material: 5.10.3 => 5.10.3 
    @mui/material: 5.10.3 => 5.10.3 
    @mui/private-theming:  5.10.3 
    @mui/styled-engine:  5.10.3 
    @mui/system: 5.10.3 => 5.10.3 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.3 
    @types/react: 18.0.15 => 18.0.15 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 4.7.4 => 4.7.4
```
</details>