Uncaught RangeError: Maximum call stack size exceeded can't figure out why

Question

I'm getting a state variable (formData) as props from parent in this child component which I'm working on. I have an email input with onChange validation which also searches for the email in our database.I have a onFormFeildsChange which is a function in another file, is setting the fromData and validating it. Once the validation is done I'm hitting an API in the " getCandidateByEmail " function to know whether this email exist or not. But the code won't move past the await function. I also tried using then() but I get the same error. Please help understand the issue with my code.

const getCandidateByEmail = async () => {
console.log("in getCandidateByEmail before");

const response = await getCandidateByEmail({
  email: formDataProp?.formData?.email?.valueText,
});

}

The use Effect:-

useEffect(() => {
if (validationStatus?.emailValid) {
  console.log("in useffect email valid");
  getCandidateByEmail();
}

}, [formDataProp?.formData?.email?.valueText]);

The input JSX :-

<input
              defaultValue={formDataProp?.formData?.email?.valueText}
              type="email"                
              placeholder="Email of candidate"
              onChange={($event) => {
                onFormFeildsChange(
                  $event,
                  formDataProp?.formData,
                  formDataProp?.setFormData
                );

} />

Answer 1

My function and the API call inside that function both had the same name which was causing this infinte loop