エラー表示を改善したいです。

TS2345: Argument of type '(data: {    title: string;    content: string;}) => Promise<void>' is not assignable to parameter of type 'SubmitHandler<FieldValues>'.
  Types of parameters 'data' and 'data' are incompatible.
    Type 'FieldValues' is missing the following properties from type '{ title: string; content: string; }': title, content
    24 |   return (
    25 |     <Box display='flex' justifyContent='center'>
  > 26 |       <form onSubmit={handleSubmit(onSubmit)}>
       |                                    ^^^^^^^^
    27 |         <FormControl
    28 |           isInvalid={errors.title}
    29 |           w={{ base: '90vw', sm: '80vw', md: '70vw', lg: '60vw' }}

TS2322: Type 'FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined' is not assignable to type 'boolean | undefined'.
  Type 'FieldError' is not assignable to type 'boolean | undefined'.
    26 |       <form onSubmit={handleSubmit(onSubmit)}>
    27 |         <FormControl
  > 28 |           isInvalid={errors.title}
       |           ^^^^^^^^^
    29 |           w={{ base: '90vw', sm: '80vw', md: '70vw', lg: '60vw' }}
    30 |         >
    31 |           <Textarea

TS2322: Type 'string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined' is not assignable to type 'ReactNode'.
  Type 'FieldError' is not assignable to type 'ReactNode'.
    Type 'FieldError' is missing the following properties from type 'ReactPortal': key, children, props
    38 |
    39 |           <FormErrorMessage>
  > 40 |             {errors.title && errors.title.message}
       |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    41 |           </FormErrorMessage>
    42 |         </FormControl>
    43 |         <FormControl

import { useForm } from 'react-hook-form';
import {
  Box,
  Button,
  FormControl,
  FormErrorMessage,
  Textarea,
} from '@chakra-ui/react';

import { createTodoApi } from '../../../stores/slices/todoAPI';

const AddTodo: React.FC = () => {
  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
    reset,
  } = useForm();
  const onSubmit = async (data: { title: string; content: string }) => {
    await createTodoApi(data);
    reset();
  };

  return (
    <Box display='flex' justifyContent='center'>
エラー①
      <form onSubmit={handleSubmit(onSubmit)}>
        <FormControl
エラー②
          isInvalid={errors.title}
          w={{ base: '90vw', sm: '80vw', md: '70vw', lg: '60vw' }}
        >
          <Textarea
            id='title'
            color='black'
            placeholder='Enter Title'
            _placeholder={{ color: 'inherit' }}
            {...register('title', { required: 'Please enter title.' })}
          />

          <FormErrorMessage>
エラー③
            {errors.title && errors.title.message}
          </FormErrorMessage>
        </FormControl>
        <FormControl
          isInvalid={errors.content}
          w={{ base: '90vw', sm: '80vw', md: '70vw', lg: '60vw' }}
        >
          <Textarea
            id='content'
            color='black'
            placeholder='Enter Content'
            _placeholder={{ color: 'inherit' }}
            {...register('content', { required: 'Please enter content.' })}
          />
          <FormErrorMessage>
            {errors.content && errors.content.message}
          </FormErrorMessage>
        </FormControl>
        <Box w='100%' display='flex' justifyContent='flex-end'>
          <Button
            mt={4}
            colorScheme='whatsapp'
            isLoading={isSubmitting}
            type='submit'
            variant='outline'
          >
            Submit
          </Button>
        </Box>
      </form>
    </Box>
  );
};

export default AddTodo;