How to validate if Confirm Password is same or not with the Password in React Native using ValidateJS?

Question

I want to create a login system in the react native app using firebase auth. In there a i have used ValidateJS for the frontend validation. But i am stuck with how to implement the confirm password field. I am not able to validate that the Confirm Password field is same the the Password Field.

I have pasted the codes below.

Signup.js

export default function Signup({ navigation }) {
  const [isLoading, setIsLoading] = useState(false);
  const [formState, dispatchFormState] = useReducer(reducer, initialState);

  const inputChangedHandler = useCallback(
    (inputId, inputValue) => {
      const result = validateInput(inputId, inputValue);
      dispatchFormState({ inputId, validationResult: result, inputValue });
    },
    [dispatchFormState]
  );

  const signupHandler = () => {    
    /// code
  };

  return (
    <SafeAreaProvider>
      <View>
        <Image source={appIcon} />
        <Text> Getting Started</Text>
        <Text> Create an account to continue !</Text>
        <View>
          <Inputs
            id="username"
            placeholder="Username"
            errorText={formState.inputValidities["username"]}
            onInputChanged={inputChangedHandler}
          />
          <Inputs
            id="email"
            placeholder="Enter your email"
            errorText={formState.inputValidities["email"]}
            onInputChanged={inputChangedHandler}
          />
          <InputsPassword
            id="password"
            placeholder="Password"
            errorText={formState.inputValidities["password"]}
            onInputChanged={inputChangedHandler}
          />
          <InputsPassword
            id="ConfirmPassword"
            placeholder="ConfirmPassword"
            errorText={formState.inputValidities["password"]}
            onInputChanged={inputChangedHandler}
          />
        </View>
        <Buttons
          title="SIGN UP"
          onPress={signupHandler}
          isLoading={isLoading}
        />
        <View>
          <Text>Already have an account?</Text>
          <TouchableOpacity
            onPress={() => {
              navigation.push("Login");
            }}>
            <Text>Log In</Text>
          </TouchableOpacity>
        </View>
        <StatusBar style="auto" />
      </View>
    </SafeAreaProvider>
  );
}

Validate.js

import { validate } from "validate.js";

export const validateString = (id, value) => {
  const constraints = {
    presence: {
      allowEmpty: false,
    },
  };
  if (value !== "") {
    constraints.format = {
      pattern: ".+",
      flags: "i",
      msg: "Value can't be blank.",
    };
  }
  const validationResult = validate({ [id]: value }, { [id]: constraints });
  return validationResult && validationResult[id];
};

export const validateEmail = (id, value) => {
  const constraints = {
    presence: {
      allowEmpty: false,
    },
  };
  if (value !== "") {
    constraints.email = true;
  }
  const validationResult = validate({ [id]: value }, { [id]: constraints });
  return validationResult && validationResult[id];
};

export const validatePassword = (id, value) => {
  const constraints = {
    presence: {
      allowEmpty: false,
    },
  };
  if (value !== "") {
    constraints.length = {
      minimum: 6,
      msg: "must be atleast 6 characters",
    };
  }
  const validationResult = validate({ [id]: value }, { [id]: constraints });
  return validationResult && validationResult[id];
};

formActions.js

import {
  validateConfirmPassword,
  validateEmail,
  validatePassword,
  validateString,
} from "../validation.js";

export const validateInput = (inputId, inputValue) => {
  if (inputId === "username") {
    return validateString(inputId, inputValue);
  }
  if (inputId === "email") {
    return validateEmail(inputId, inputValue);
  }
  if (inputId === "password" || inputId === "confirmPassword") {
    return validatePassword(inputId, inputValue);
  }
};

formReducer.js

export const reducer = (state, action) => {
  const { validationResult, inputId, inputValue } = action;

  const updatedValues = {
    ...state.inputValues,
    [inputId]: inputValue,
  };
  const updatedValidities = {
    ...state.inputValidities,
    [inputId]: validationResult,
  };
  let updatedFormIsValid = true;
  for (const key in updatedValidities) {
    if (updatedValidities[key] !== undefined) {
      updatedFormIsValid = false;
      break;
    }
  }
  return {
    inputValues: updatedValues,
    inputValidities: updatedValidities,
    formIsValid: updatedFormIsValid,
  };
};