Update parent state variable from child React Reactive Form

I am trying to explore react library with next framework. Since I am an angular developer, I like to reuse some of my reactive-form to my new application. I found this library since it has almost the same implementation of reactive-form.

Now, I am using state variable on my parent form; however, whenever I try to update the value from child (which is the reactive form). I cannot accomplish it.

Here's my simple code to replicate this.

import React, { useState } from "react";
import { FieldGroup, FieldControl } from "react-reactive-form";

export default function App() {
  const [isRegistered, setIsRegistered] = useState(false);

  async function submitForm(e) {
    e.preventDefault();
    setIsRegistered(state => !state);
    console.log(isRegistered);
    //await function call .....
  }

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <FieldGroup
        control={form}
        render={({ get, invalid }) => (
          <form onSubmit={submitForm}>
            <FieldControl
              name="email"
              render={TextInput}
              meta={{ label: "Email" }}
            />
            <button type="submit">Submit</button>
            <p>{isRegistered.toString()}</p>
            {isRegistered ? <span>Registered Successfully</span> : null}
          </form>
        )}
      />
      
    </div>
  )
}

Just to keep it short, the form and TextInput is just a model and an element.

As you can see., I am updating my state variable on the submitForm function by putting it as an onSubmit function of my form; however, I am able to trigger the submitForm whenever I am trying to submit, but the state variable value doesn't change.

The thing is, when I try to call the submitForm function outside the child (FieldGroup), I am able to update the value.

I created a sample app so you can check as well.