验证表单，即使用reactjs中的材质ui创建的电子邮件密码

我创建了一个简单的注册表单，在这里我遇到了验证用户电子邮件和密码的问题。 我尝试过实现react钩子组件，但教程与我编写的代码完全不同。但是我想从给定的代码继续，而不是新代码

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

function Copyright() {
  return (
    //using the link of my linkedin profile
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://www.linkedin.com/in/hardik-poudel/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const useStyles = makeStyles((theme) => ({
  root: {
    height: '100vh',
  },
  image: {
    backgroundImage: 'url(https://source.unsplash.com/random)',
    backgroundRepeat: 'no-repeat',
    backgroundColor:
      theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

export default function SignIn() {
  const classes = useStyles();
  //const [sent, setSent]=React.useState(false);


  return (
    <Grid container component="main" className={classes.root}>
      <CssBaseline />
      <Grid item xs={false} sm={4} md={7} className={classes.image} />
      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign up
          </Typography>
          
          <form className={classes.form} noValidate>
          <Grid container spacing={2} >
            <Grid item xs={12} sm={6}>
                <TextField
                  autoComplete="fname"
                  name="firstName"
                  variant="outlined"
                  required
                  fullWidth
                  id="firstName"
                  label="First Name"
                  autoFocus
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  variant="outlined"
                  required
                  fullWidth
                  id="lastName"
                  label="Last Name"
                  name="lastName"
                  autoComplete="lname"
                />
              </Grid>
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email"
                name="email"
                autoComplete="email"
                autoFocus
                
              />
            
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
              />
              <FormControlLabel
                control={<Checkbox value="remember" color="primary" />}
                label="Remember me"
              />
          </Grid>
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              Sign Up
            </Button>
            
            <Box mt={5}>
              <Copyright />
            </Box>
          </form>
        </div>
      </Grid>
    </Grid>
  );
}

从“React”导入React；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Box”导入框；
从“@material ui/core/Grid”导入网格；
从“@material ui/icons/LockOutlinedIcon”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从'@material ui/core/styles'导入{makeStyles}；
函数版权（）{
返回(
//使用我的linkedin个人资料的链接
{'Copyright}
你的网站
{' '}
{新日期（）.getFullYear（）}
{'.'}
);
}
const useStyles=makeStyles（（主题）=>({
根目录：{
高度：“100vh”，
},
图片：{
背景图片：“url”(https://source.unsplash.com/random)',
背景重复：“不重复”，
背景颜色：
theme.palette.type=='light'？theme.palette.grey[50]：theme.palette.grey[900]，
背景尺寸：'封面'，
背景位置:"中锋",，
},
论文：{
边距：主题。间距（8,4），
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
},
化身：{
边距：主题。间距（1），
背景色：theme.palete.secondary.main，
},
表格：{
宽度：“100%”，//修复IE 11问题。
marginTop：主题。间距（1），
},
提交：{
边距：主题。间距（3,0,2），
},
}));
导出默认函数SignIn（）{
const classes=useStyles（）；
//const[sent，setSent]=React.useState（false）；
返回(
注册
注册
);
}

这是UI的注册页面。 我想从上面的代码继续。 我想验证用户电子邮件和密码是否至少有8个字符，其中至少有一个字母和数字