抱歉的问题，也许这是非常愚蠢的，但我正在学习，我还没有能够解决它，我从材料-用户界面的注册模板，并决定执行与React钩子形式和一切工作的验证，但我想添加显示或隐藏它的眼睛图标的密码功能，原来，当我设法做到这一点，它正在将字段类型从“文本字段”更改为“FormControl”，但当出现错误时，它们不再向我显示帮助消息。
在代码中有2个密码字段，第一个工作，因为我想，但没有隐藏/取消隐藏，第二个有图标，但正如我提到的，它不显示消息。
让我印象深刻的是，当出现错误时，它会正确地变红。
如果你能帮我使它正常工作，我将不胜感激。谢谢

import React, {useState} 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 Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton';
import FormControl from '@material-ui/core/FormControl';
import clsx from 'clsx';
import InputLabel from '@material-ui/core/InputLabel';
import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers';
import { useForm} from "react-hook-form";
import { OutlinedInput } from '@material-ui/core';

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  margin: {
    margin: theme.spacing(1),
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(3),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

const RegisterSchema = yup.object().shape({
    password: yup
    .string()
    .trim()
    .required('Requerido.') 
    .min(8, 'Contraseña es muy corta - Debe contener al menos 8 caracteres.')
    .max(15, 'Contraseña es muy larga - Debe contener máximo 15 caracteres.')
    .matches(/[a-zA-Z]/, 'Contraseña solo puede contener letras latinas.')
});

export default function SignUp() {
  
  const classes = useStyles();

  const [data, setData] = useState({
    password:'',
    showPassword: false,
  });
     
  const handleChange = (prop) => (event) => {
    setData({ ...data, [prop]: event.target.value });
  };

  const handleClickShowPassword = () => {
    setData({ ...data, showPassword: !data.showPassword });
  };

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };

  const handleInputChange = (e) => {
    console.log(e.target.value);
    setData ({
      ...data,
      fullName: (data.firstName + ' ' + data.lastName),
      [e.target.name] : e.target.value,
    })
  }
  
  const {register, handleSubmit, errors} = useForm({
    resolver: yupResolver(RegisterSchema),
  });
  
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Registro
        </Typography>
        <form className={classes.form} noValidate onSubmit={handleSubmit(onSubmit)}>
          <Grid container spacing={2}>
            {<Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="Contraseña"
                type="password"
                id="password"
                autoComplete="current-password"
                onChange={handleInputChange}
                inputRef={register}
                error ={!!errors.password}
                helperText={errors.password ? errors.password.message : ''}
                endAdornment={
                  <InputAdornment position="end">
                    <IconButton
                      aria-label="toggle password visibility"
                      onClick={handleClickShowPassword}
                      onMouseDown={handleMouseDownPassword}
                      edge="end"
                    >
                      {data.showPassword ? <Visibility /> : <VisibilityOff />}
                    </IconButton>
                  </InputAdornment>
                }
              />
            </Grid>}

          <FormControl 
            className={clsx(classes.margin, classes.textField)} 
            variant="outlined" 
            autoComplete="current-password"
            inputRef={register}
            error ={!!errors.password}
            helperText={errors.password ? errors.password.message : ''}
            name="password"
            type="password"
            id="password"
            fullWidth
            required
            >
            <InputLabel 
              htmlFor="outlined-adornment-password">
              Contraseña
            </InputLabel>
            <OutlinedInput
              id="outlined-adornment-password"
              type={data.showPassword ? 'text' : 'password'}
              value={data.password}
              onChange={handleChange('password')}
              endAdornment={
                <InputAdornment position="end">
                  <IconButton
                    aria-label="toggle password visibility"
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                    edge="end"
                  >
                    {data.showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              }
              labelWidth={92}
            />
          </FormControl>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Registrate
          </Button>
          <Grid container justify="flex-end">
            <Grid item>
              <Link href="#" variant="body2">
                ¿Tienes una cuenta? Ingresa
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={5}>
        <Copyright />
      </Box>
    </Container>
  );
}