Warning as Error: default props has been depricated for Next.js

[seitbekir]

Describe the bug Shows error in console, ignores scripted behavior. For example, when submitting it does not handle submit.

To Reproduce Steps to reproduce the behavior:

1. Create form with validation
2. Get error on yarn terminal

- error node_modules/react-reactive-form/dist/react-reactive-form.cjs.js (132:0) @ Observable.next
- error ReferenceError: window is not defined

3. Errors on browser console

Warning: FieldGroup: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
FieldGroup@webpack-internal:///(app-client)/./node_modules/react-reactive-form/dist/react-reactive-form.es.js:2567:16
div
AuthPage@webpack-internal:///(app-client)/./app/(frontend)/auth/(sign-in)/page.tsx:17:24

Expected behavior No errors in console.

Desktop (please complete the following information):

• OS: Arch
• Browser Firefox
• Version 114.0.1

Additional context The code

'use client'
import Link from 'next/link'
import { FieldGroup, FieldControl, Validators, FormBuilder } from 'react-reactive-form'

import InputText from '@/app/(frontend)/_components/input-text'
import { signIn } from 'next-auth/react'
import { getServerSideProps } from '../_service'
import { InferGetServerSidePropsType } from 'next'
import InputCsrfToken from '../_components/input-csrf-token'

export default function AuthPage(
  { children }: { children: React.ReactNode },
  { csrfToken }: InferGetServerSidePropsType<typeof getServerSideProps>
) {
  const loginForm = FormBuilder.group({
    csrfToken: [csrfToken],
    username: ["", Validators.required],
    password: ["", Validators.required],
  });

  const handleSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault();
    //
    // signIn();
  }

  return (<>
    <div className="text-center mx-auto w-72 sm:w-80 md:w-96">
      <div className="text-3xl font-bold text-white pb-4">Sign in</div>

      <FieldGroup
        control={loginForm}
        render={({ get, pristine, invalid, pending }) => (
          <form onSubmit={() => handleSubmit}>


            <FieldControl
              name="csrfToken"
              render={InputCsrfToken}
            />

            <FieldControl
              name="username"
              render={InputText}
              meta={{
                variant: 'light',
                label: 'Username',
              }}
            />

            <FieldControl
              name="password"
              render={InputText}
              meta={{
                variant: 'light',
                label: 'Password',
                type: 'password'
              }}
            />

            <div className="flex justify-between mx-auto sm:w-80 md:w-96 pb-4">
              <button
                className="w-1/2 button-primary button-light"
                disabled={pristine || invalid || pending}
              >Sign in</button>

              <div className="w-5"></div>

              <Link href="/auth/sign-in" className="w-1/2 button-secondary button-light">Sign up</Link>
            </div>
          </form>
        )}
      />
    </div>
  </>)
}