Hi

I have a signup form that work as intended but I need to add useState for updating email input that I populated with search param on first load.
the thing is when a user first time try to log in, signin form redirects the user to this signup page and also it stores the user's email in the search params. Then after redirecting I use the email in param (if avalible) to update the email field. But also I want this field to be editable and for this I tried to add useState and it updates the email field. now the user can edit the email or even remove it entirly. But after the submit the form won't work. actully It creates the user and write it in database but won't return it for a auto callback signin. Also the form stays in pending too


form configuration

  const searchParams = useSearchParams();
  const email = searchParams.get('email') as string;

  const [emailInput, setEmailInput] = useState(email);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = async (data: FieldValues) => {
    const user = await CreateUser(data);

    if (user) {
      signIn('credentials', {
        ...data,
        callbackUrl: '/',
      });
    }
  };

and the email input

      <input
        {...register('email', {
          required: 'required',
        })}
        type='email'
        value={emailInput}
        onChange={(e) => setEmailInput(e.target.value)}
        placeholder='email'
        className='px-4 py-2 border-cyan-950 border-2 rounded text-xl w-1/3'
      />