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

Solution for Having trouble verifying email in firebase, applyActionCode keeps saying my code is invalid
is Given Below:

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 urlenter image description here

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