There are no errors in the code.
However, an error appears on the browser.
There are also some other components that cannot be used.
An error occurs when using TextFiled in either client-side or server-side components.
Isn't Material UI fully supported...?

version
"@mui/material": "^5.15.6",
"@mui/material-nextjs": "^5.15.6",
"next": "14.1.0",
"react": "^18",

Doesn't move

import { Link, TextField, Typography } from "@mui/material";

export default function Home() {
  return (
    <>
      <Typography variant="h1" component="h2">
        Home
      </Typography>
      <Link href="/login">LoginPage</Link>
      <TextField
          required
          fullWidth
          name="email"
          label="メールアドレス"
          variant="outlined"
          sx={{ marginTop: "20px" }}
        />
    </>
  );
}

works fine

import { Link, TextField, Typography } from "@mui/material";

export default function Home() {
  return (
    <>
      <Typography variant="h1" component="h2">
        Home
      </Typography>
      <Link href="/login">LoginPage</Link>
      {/* <TextField
          required
          fullWidth
          name="email"
          label="メールアドレス"
          variant="outlined"
          sx={{ marginTop: "20px" }}
        /> */}
    </>
  );
}