(react-hook-form) Ошибка валидации

Есть форма, после подтверждения которой всегда высвечивает одну и ту же ошибку в обеих полях вне зависимости от введённых значений, да ещё и красным не подсвечивает. Я пробовал подсвечивать через error.title?message != '' и error.body?message != ''. Это работало всегда, но также не реагирует ни на какое значение.

Я только предполагаю, что ошибка всегда высвечивается одна и та же, потому что оно является первым в списке среди остальных ошибок и видимо не привязано каким-либо образом к условиям валидации.

Что нужно изменить в коде, чтобы при ошибке валидации высвечивалась нужная ошибка, а поле окрашивалось красным цветом?

import * as React from 'react';
import firebase from '../firebase';
import { Button, CssBaseline, TextField, Box, Typography, Container} from '@material-ui/core';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

type Post = {
  title: string;
  body: string;
};

export default function Form(){
  const validationSchema = Yup.object().shape({
    title: Yup.string()
      .required('Title is required.')
      .max(100, 'Title must not exceed 100 characters.'),
    body: Yup.string()
      .required('Description is required.')
      .max(100, 'Description must not exceed 100 characters.'),
  });
  
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm<Post>({
    resolver: yupResolver(validationSchema)
  });

  const onSubmit = (data: Post) => {
    console.log(JSON.stringify(data, null, 2));
  };

  return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <Box
          sx={{
            marginTop: '50%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Typography component="h1" variant="h5">
            Publish your new article
          </Typography>
          <Box sx={{ mt: 1 }}>
            <form onSubmit={handleSubmit(onSubmit)}>
              <TextField
                margin="normal"
                fullWidth
                id="title"
                label="Title*"
                name="title"
                autoFocus
                helperText={errors.title?.message}

              />
              <TextField
                fullWidth
                label="Description*"
                multiline
                rows={4}
                id="body"
                name="body"
                helperText={errors.body?.message}
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="success"
                sx={{ mt: 3, mb: 2 }}
              >
                Publish
              </Button>
            </form>
          </Box>
        </Box>
      </Container>
  );
}