How to add Custom Validations for React Material UI controls?

I'm using ReactJs in an application and I need to add validation against my all fields.

I want add validation against name, phone number, email, password and confirm password.

When anyone 'll enter some invalid data in these fields, validation messages should be displayed with fields.

import React from 'react';   
import Button from '@material-ui/core/Button';
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 Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

const useStyles = makeStyles((theme) => ({
  paper: {
    display: 'flex',
    flexDirection: 'column',
  }
}));

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

  return (
    <Container component="main" maxWidth="xs">        
      <div className={classes.paper}>        
        <form >
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                autoComplete="name"
                name="name"
                variant="outlined"
                required
                error
                fullWidth
                id="name"
                label="Name"
                autoFocus
              />
            </Grid>           
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
              />
            </Grid>            
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="password"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="repeatpassword"
                label="Repeat Password"
                type="password"
                id="repeatpassword"
                autoComplete="repeat-password"
              />
            </Grid>           
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Create
          </Button>         
        </form>
      </div>    
    </Container>
  );
}

I'm a newbie with react. What should I do in my code?

I've grabbed the example code for a menus and cards from here: https://material-ui.com

Application built with
{
  "react": "16.13.0", 
  "react-dom": "^16.13.0", 
  "react-redux": "^7.2.0",
  "redux": "^4.0.4"
  "@material-ui/core": "^4.9.5"
}

The problem i face is getting an error in following function:

<TextField
                    autoComplete="name"
                    name="name"
                    variant="outlined"
                    required
                    error
                    fullWidth
                    id="name"
                    label="Name"
                    autoFocus
                  />

above Textfield is displaying the required validation error on form submit but this is not what i am trying to implement. I want to customize the validations and validation messages for email, confirm email, phone number, password and confirm password as per recommended approach.

I tried to follow guides and looked up example implementations but could not find the recommended way to solve the the issue.