Исправить ошибку React: функции недопустимы в качестве дочерних элементов React

Я следую руководству по реагированию, добавляю запрос POST и столкнулся со следующей ошибкой:

Функции недопустимы в качестве дочерних элементов React. Это может произойти, если вы возвращаете компонент вместо рендеринга. Или, может быть, вы хотели вызвать эту функцию, а не вернуть ее.

До этого я смотрел события отправки, и все было хорошо. Веб-сайт все еще работает, но я получаю сообщение fetch aborted, когда проверяю консоль.

Я знаю, что у них уже много подобных ошибок при переполнении стека, и я рассмотрел несколько из них. Я видел много проблем и решений, некоторые понял. Но ни один из них не соответствует тому, что я пытаюсь сделать. Примечание. Я новичок в реагировании, это мое первое веб-приложение. Ошибка появилась только после добавления моего POST-запроса. Create.js

import { useState } from "react";

const Create = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [author, setAuthor] = useState('mario');
  const [isLoading, setIsLoading] = useState(false);

   //Submit events
   const handleSubmit = (e) => {
    e.preventDefault();
    const blog = { title, body, author };
     setIsLoading(true);

    //POST request
      fetch("http://localhost:8000/blogs", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(blog),
      }).then(() => {
        console.info("new blog added");
        setIsLoading(false);
      })
   }

return (
 <div className = "create">
  <h2>Add a new blog</h2>

//Input form
   <form onSubmit = { handleSubmit } >
    <label>Blog title</label>
    <input
     type = "text"
     required
     value = { title }
     onChange = {(e) => setTitle(e.target.value)}
    />
     <label>Blog body</label>
     <textarea
      required
      value = { body }
      onChange = {(e) => setBody(e.target.value)}
      ></textarea>
      <label>Blog author</label>
 
//Blog author
    <select>  
    value = { author}
    onChange = {(e) => setAuthor(e.target.value)}
     <option value = "mario">Mario</option>
     <option value = "yoshi">Yoshi</option>
    </select>
  </form>

//Button
  { !isLoading && <button>Add blog</button> }
  { isLoading && <button disabled>Adding blog...</button> }
   <p>{ title }</p>
   <p>{ body }</p>
   <p>{ author }</p>
  </div>
  );
}
 
export default Create;