Используй форму реакции с Гэтсби. js

Question

Привет, у меня есть вопрос с кодом ниже, я готовлю форму в реакции. js, которая заботится после заполнения формы, чтобы отправить значения на внутренний сервер с помощью ax ios, чтобы сделать это, я использую код ниже, проблема, которая у меня есть, заключается в том, что, когда поля формы заполнены правильно, становится возможным нажать на кнопку формы, но в настоящее время кнопка остается заблокированной, даже если поля заполнено правильно, как я могу сделать?

Реакция. js Код:

import React from "react";
import { Link } from "gatsby";
import server from "./setup.js";
import Layout from "../components/layout";
import SEO from "../components/seo";
import axios from "axios";
import { useForm, useField } from "react-form";

//Eseciuzione della funzione di login
 function funzionediLogin(Email,Password) {
  console.log("Sono all'interno della funzione di login con Email: "+Email+" Password: "+Password);
  axios.post(server.server+'/login', {
    Username: Email,
    Password: Password,
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

//Funzione che esegue la validazione della password
function validatePassword(value) {
  if (!value) {
    return "E' richiesta una password";
  }
  return true;
}

function checkEmail(emailAddress) {
  var sQtext = '[^\\x0d\\x22\\x5c\\x80-\\xff]';
  var sDtext = '[^\\x0d\\x5b-\\x5d\\x80-\\xff]';
  var sAtom = '[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c\\x3e\\x40\\x5b-\\x5d\\x7f-\\xff]+';
  var sQuotedPair = '\\x5c[\\x00-\\x7f]';
  var sDomainLiteral = '\\x5b(' + sDtext + '|' + sQuotedPair + ')*\\x5d';
  var sQuotedString = '\\x22(' + sQtext + '|' + sQuotedPair + ')*\\x22';
  var sDomain_ref = sAtom;
  var sSubDomain = '(' + sDomain_ref + '|' + sDomainLiteral + ')';
  var sWord = '(' + sAtom + '|' + sQuotedString + ')';
  var sDomain = sSubDomain + '(\\x2e' + sSubDomain + ')*';
  var sLocalPart = sWord + '(\\x2e' + sWord + ')*';
  var sAddrSpec = sLocalPart + '\\x40' + sDomain; // complete RFC822 email address spec
  var sValidEmail = '^' + sAddrSpec + '$'; // as whole string

  var reValidEmail = new RegExp(sValidEmail);

  return reValidEmail.test(emailAddress);

}
//Funzione che si occupa di validare l'indirizzo email
async function validateEmail(email, instance) {

    if(!checkEmail(email) || !email){
       return "Email non valida";
    }
    return true;

}

function EmailField() {
  const {
    meta: { error, isTouched, isValidating },
    getInputProps
  } = useField("Email", {
    validate: validateEmail
  });

  return (
    <>
      <input {...getInputProps()} />{" "}
      {isValidating ? (
        <em> Validating... </em>
      ) : isTouched && error ? (
        <em>{error}</em>
      ) : null}
    </>
  );
}

//Oggetto password
function PasswordField() {
  const {
    meta: { error, isTouched, isValidating },
    getInputProps
  } = useField("Dati.Password", {
    validate: validatePassword

  });

  return (
    <>
      <input {...getInputProps()} type="password" />{" "}
      {isValidating ? (
        <em>Validazione...</em>
      ) : isTouched && error ? (
        <em>{error}</em>
      ) : null}
    </>
  );
}

function LoginForm() {
  // Use the useForm hook to create a form instance
  const {
    Form,
    meta: { isSubmitting, canSubmit }
  } = useForm({
    onSubmit: async (values, instance) => {
      canSubmit=false;
      if(validateEmail(values.EmailField) && validatePassword(values.PasswordField)){

        console.log("Email e password corretti");
      }
      else{
        console.log("Errore: Email e Password non corretti");
      }
      if(await funzionediLogin(values.Email,values.Password)){
        console.log("Registrazione riuscito correttamente");
      }
      else{
        console.log("Errore: durante la registrazione");
      }
    },
    debugForm: false
  });

  return (
    //Modulo form di registrazione
    <Form>
      <div>
        <label>
          Email: <EmailField />
        </label>
        <p></p>
      </div>
      <div>
        <label>
          Password: <PasswordField />
        </label>
        <p></p>
      </div>

      <div>
        <button type="Invia" disabled={!canSubmit}>
          Registrazione
        </button>
      </div>

      <div>
        <em>{isSubmitting ? "Submitting..." : null}</em>
      </div>
    </Form>
  );
}
//Pagina di registrazione
const NuovoPage = () => (

  //Impostazione dle modulo form per la registrazione
  <Layout>
    <SEO title="Registrazione" /> 
     <LoginForm />
    <Link to="/">Ritorna alla homepage</Link>
  </Layout>
)

//Esporto la pagina della pagina di registrazione
export default NuovoPage