解決したいこと

React(Typescript)で掲示板のようなWebアプリをつくっています。 記事を投稿する機能の実装中に下記のエラーが発生しました。 解決方法を教えて下さい。

発生している問題・エラー

TS2588: Cannot assign to 'isSubmitting' because it is a constant.
    28 |   const onSubmit = async (data: { title: string; content: string }) => {
    29 |     await createTodoApi(data).catch((e) => {
  > 30 |       isSubmitting = false;
       |       ^^^^^^^^^^^^
    31 |     });
    32 |     reset();
    33 |   };

自分で試したこと

下記のコードを入力したが、改善しなかった。

その①

let isSubmitting = false;

その②

import { useState } from 'react';

const [isSubmitting, setIsSubmitting] = useState(false);

setIsSubmitting(false);

該当するソースコード

//その②
//import { useState } from 'react';

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

type FormValues = {
  title: string;
  content: string;
};

// その①
//　let isSubmitting = false;

const AddTodo: React.FC = () => {
//その②
//const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormValues>();
  
 const onSubmit = async (data: { title: string; content: string }) => {
    await createTodoApi(data).catch((e) => {
      isSubmitting = false;
//その②
//setIsSubmitting(false);
    });
    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;