I am trying to create a hook that hides my form after it has been submitted whilst trying to show message sent image afterwards but I can’t seem to get the form to disappear.

so far I have tried this:

const ContactForm = () => {
  ...
  const [show, setShow] = React.useState(true);

const handleSubmit = (e) => {
  ...
}

My content is here:

return (
 <>
  {show ? (
          <form onSubmit={handleSubmit} className='email-form'>
            <div className='form'>
              <input .../>
              <input .../>
              <textarea .../>
            </div>
            <button
              disabled={!name || !email || !message}
              onClick={() => {
                handleSubmit();
                setShow(!show);
                if(!handleSubmit) {
                  setShow(false)
                } else {
                  setShow(true)
                }
              }}
             type="submit"
             className='send-btn'
            >
              <span>Send Message</span>
           </button>
   
       <div className='message-sent'>
          <CircleCheckBig className='sent-tick' strokeWidth={1} size={200}/>
          <p className='sent-message'>Message Sent</p>
        </div>
      </form>) : null}
  </>

I want the 'email-form' to disappear when the ‘Send Message’ button is clicked and to be replaced with the message-sent <div>. Any ideas on how to achieve this? Thank you.

I tried an if statement and hooks mainly.