Repository: material-ui
Issue: `useTheme` doesn't reflect custom theme values when used with Remix SSR setup
Labels: examples

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

Used [Remix + MUI example](https://github.com/mui/material-ui/tree/master/examples/remix-with-typescript) as a base without any changes. I tried using the `useTheme` hook in `Copyright` component so I can use custom theme values defined in `createTheme`, but the `theme` object from `useTheme` doesn't contain values defined in the custom theme object.

Console logging the theme object from `useTheme` shows correct values on the server, but wrong values in the browser.

The bug happens in any component but here's how I encountered it in `Copyright.ts` file:
```tsx
import Typography from "@mui/material/Typography";
import Link from "@mui/material/Link";
import { useTheme } from "@mui/material";

export default function Copyright() {
  const theme = useTheme();

  console.log(theme);

  return (
    <Typography variant="body2" color="text.secondary" align="center">
      {"Copyright © "}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>{" "}
      {new Date().getFullYear()}.
    </Typography>
  );
}
```

How `theme.ts` file looks:
```tsx
import { createTheme } from "@mui/material/styles";
import { red } from "@mui/material/colors";

// Create a theme instance.
const theme = createTheme({
  palette: {
    primary: {
      main: "#556cd6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
  },
});

export default theme;
```

### Expected behavior 🤔

Resulting theme object from `useTheme` should reflect any values defined in the custom theme object passed to `createTheme`.

### Steps to reproduce 🕹

Steps:

1. Clone the [Remix + MUI example](https://github.com/mui/material-ui/tree/master/examples/remix-with-typescript) repo:
```sh
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/remix-with-typescript
cd remix-with-typescript
```
2. Copy the code from `Current behavior` section into `app/src/Copyright.tsx` file
3. Start the app with `npm run dev`, open the browser and check the console


### Context 🔦

[Remix + MUI example](https://github.com/mui/material-ui/tree/master/examples/remix-with-typescript)

### Your environment 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

```
System:
    OS: macOS 11.3.1
  Binaries:
    Node: 16.9.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.20.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Edge: Not Found
    Firefox: 96.0.2
    Safari: 14.1
  npmPackages:
    @emotion/react: latest => 11.8.1 
    @emotion/styled: latest => 11.8.1 
    @mui/base:  5.0.0-alpha.69 
    @mui/material: latest => 5.4.3 
    @mui/private-theming:  5.4.2 
    @mui/styled-engine:  5.4.2 
    @mui/system:  5.4.3 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.2 
    @types/react: latest => 17.0.39 
    react: latest => 17.0.2 
    react-dom: latest => 17.0.2 
    typescript: latest => 4.5.5
```
</details>