Having trouble verifying email in firebase, applyActionCode keeps saying my code is invalid

Question

I have been trying to verify email with firebase but for some reason the emailVerified field never becomes true. I am successfully receiving the email link, when I open the link it redirects me back to the verify email page, and on the page I am parsing the url and capturing the oob code, and then passing into the applyActionCode function. When I do this it keeps telling me my code is invalid. Please help..

Signup function where I am sending the email verification (this part works)

 const handleSignup = async (email, password) => {
    try {
      setLoading(true);
      await signup(email, password).then(() => {
        sendVerificationEmail(email);
      });
      // history.push('/home');
    } catch (err) {
      // firebase error
      handleInputValidation(err);
      setLoading(false);
    }
  };

VerifyEmail.jsx (this is the page I am redirected to when I open the link)

const EmailVerification = () => {

  const {
    currentUser,
    isCorrectEmailLink,
    signInWithEmail,
    sendVerificationEmail,

    verifyWithCode,
    updateUserForVerification,
  } = useAuth();
  const currentUserEmail = currentUser.email;

  const query = window?.location?.href?.split('oobCode=')[1];
  const oob = query?.split('&mode')[0];
  console.log(oob, 'here');

  const verifyEmail = async (emailLink, email) => {
    const isCorrect = isCorrectEmailLink(emailLink);

    if (oob !== undefined) {
      verifyWithCode(oob);
    }
    await updateUserForVerification();
  };

  useEffect(() => {
    if (!currentUser.isVerified) {
      verifyEmail(window.location.href);
    }
  }, []);

  return (
    <GridContainer>
      <LoginContainer>
        <WelcomeToDavie />
        <AppletContainer>
          <WelcomeText>Verify Your email adress</WelcomeText>
          <Applet>
            <FormName>Verify</FormName>
            <LoginTextFieldContainer>
              Verification code sent
              <button onClick={() => sendVerificationEmail(currentUserEmail)} type="button">
                send email
              </button>
            </LoginTextFieldContainer>
          </Applet>
        </AppletContainer>
      </LoginContainer>
    </GridContainer>
  );
};

export default EmailVerification;

Here is the error I get when sending the oob code taken from the email link url

Please help me figure this out, been on this issue for a couple weeks now.