I am attempting to implement a password reset function in Firebase v9, however upon submitting the request, the page times out due to "RangeError: Maximum call stack size exceeded." The relevant code for this is shown below, any suggestions would be great.

Firebase.js:

export const sendPasswordResetEmail = async (email) => {
try {
  await sendPasswordResetEmail(auth, email);
  alert("Password reset link sent!");
} catch (err) {
  console.error(err);
  alert(err.message);
}
};

PasswordResetMain.js:

import { sendPasswordResetEmail } from "../Config/firebase.js";
...
function PasswordResetMain(props) {

const PasswordResetHeaderContainer = styled.div`
    width: 100%;
    height: 10vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
`;

const Logo = styled.img`
    width: 20vh;
    height: 12.5vh;
    float: right;
`;

const emailRef = useRef();

return(
    <MainContainer>
        <PasswordResetHeaderContainer>
            <PageTitle content="Uni-Deadline Manager Password Reset"></PageTitle>
            <Logo src={LogoPlaceholder} alt="UDM Logo" />
        </PasswordResetHeaderContainer>
        <PasswordResetMainContainer>
            <MainHeader content="Reset Password"></MainHeader>
            <FollowUpText content="Complete the form below to reset your password."></FollowUpText>
            <InputBox ref={emailRef} placeholder="Email" />
            <CallToActionBtn content="Submit" onClick={() => sendPasswordResetEmail(emailRef.current.value)} />
        </PasswordResetMainContainer>
    </MainContainer> 
)
}
export default PasswordResetMain;