Not updating with react hooks

[sayax]

Describe the bug
A clear and concise description of what the bug is.
Field Group state not updating with react useState hook

To Reproduce
Steps to reproduce the behavior:

1. Create reactive form
2. create const [loading, setLoading] = useState(false)
3. create button
   <Button disabled={!form.valid || loading} className="primary" onClick={submit} />
4. change state on click
   const submit = () => {
   setLoading(true);
   }

Expected behavior
A clear and concise description of what you expected to happen.
button disabled has loading = true state
Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[sayax]

1.5) create form template

    <FieldGroup
      control={form}
      render={({ get, invalid }) => (
          <>
          <FieldControl
            name="username"
            render={({ handler, touched, hasError, meta }) => (
            <StyledFormField
              error={
                (touched && hasError('required') && 'required')
              }
            >
              <Input
                as={MaskedInput}
                mask={['+', '7', ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/]}
                placeholder=""
                {...handler()}
              />
            </StyledFormField>
            )}
          />
          <Button disabled={!form.valid || loading} className="primary" onClick={submit} />
          </>
      )}
    />

[bietkul]

By default, Field components only get re-render only when there is a change in the control's state.
It's recommended to not use the state under the Field component for better performance.
I can see that you're using a state variable named loading, it's better to put the Button component outside of the form, for example:

import { Field, ... } from 'react-reactive-form';
...
<>
  <FieldGroup
      control={form}
      render={({ get, invalid }) => (
          <>
          <FieldControl
            name="username"
            render={({ handler, touched, hasError, meta }) => (
            <StyledFormField
              error={
                (touched && hasError('required') && 'required')
              }
            >
              <Input
                as={MaskedInput}
                mask={['+', '7', ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/]}
                placeholder=""
                {...handler()}
              />
            </StyledFormField>
            )}
          />
          </>
      )}
    />
  <Field
    strict={false}
    control={form}
    render={({ invalid }) => <Button disabled={invalid || loading} className="primary" onClick={submit} />}
  />  
</>

If you still want to bypass it, please use strict prop as false in FieldGroup and FieldControl to avoid this default behavior, check here.