useState(true) 返回的方法不是函数

我正在创建一个基本的注册组件，用户将在其中输入姓名、电子邮件和密码。当用户单击“创建帐户”时，我希望它隐藏注册表单并显示Circular Spinner。我正在使用useState钩子，但在提交表单时出现以下错误：

未处理的运行时错误类型错误：isCreating 不是函数

注册.js

import { useState } from 'react'
import { useForm } from "react-hook-form";
import { css } from "@emotion/core";
import BounceLoader from "react-spinners/BounceLoader";

const override = css`
  display: block;
  margin: 0 auto;
`;



const Signup = () => {
    const { creating, isCreating } = useState(false)
    const { register, handleSubmit, formState } = useForm();
    const onSubmit = async (data) => {

        isCreating(true)

        if (data.password1 === data.password2){
            console.log("Password matched")
        }

        const user = {
            name: data.name,
            email: data.email,
            password: data.password1
        }
      fetch("api/users", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(user),
      })
        .then((res) => res.json())
        .then((data) => {
            console.log(data);
        });
    };

    return (
        <>
            { creating ?
             <div className="spinner">
             {/* <ClipLoader color={color} loading={loading} css={override} size={150} /> */}
             <div className="spinner-indicator">
               <BounceLoader css={override} size={64} />
             </div>
             <div className="spinner-text">Creating Account...</div>
           </div>

           :


           <div className="authCard">
           <div className="authCardTitle"></div>
   
           <div className="authCardBody">
 
             <div className="right">
               <div className="auth--heading">Sign up with email</div>
               <p className="auth--subheading">
                 Enter your email address to create an account.
               </p>
               <form onSubmit={handleSubmit(onSubmit)}>
                 <div className="form--group">
                   <input
                     type="text"
                     className="form--control"
                     placeholder="Your Name"
                     {...register("name")}
                   />
                 </div>
   
                 <div className="form--group">
                   <input
                     type="email"
                     className="form--control"
                     placeholder="Your Email"
                     {...register("email")}
                   />
                 </div>
   
                 <div className="form--group">
                   <input
                     type="password"
                     className="form--control"
                     placeholder="Your Password"
                     {...register("password1")}
                   />
                 </div>
   
                 <div className="form--group">
                   <input
                     type="password"
                     className="form--control"
                     placeholder="Confirm Your Password"
                     {...register("password2")}
                   />
                 </div>
   
                 <div
                   style={{
                     display: "flex",
                     justifyContent: "space-between",
                     alignContent: "center",
                   }}
                 >
                   <div className="form--group">
                     <button
                       class="btn btn--dark btn--filled btn--contact"
                       href="./contact.html"
                     >
                       Continue
                     </button>
                   </div>
                 </div>
               </form>
   
               <div className="account--exists">
                 <p>
                   Account already exists? <a href="#">Login</a>
                 </p>
               </div>
             </div>
          
       
             
          
           </div>
         </div>
       
        }
        </>

    );
}

export default Signup;