Define an onSuccess function for authenticateUser:

user.authenticateUser(authDetails, {
  onSuccess: (result) => {
    console.log(result);
  },
  onFailure: (err) => {
    console.error('onFailure:', err);
  },
  newPasswordRequired: () => {
    user.completeNewPasswordChallenge(passwordFirst, {
      onFailure: (err) => {
        console.error('onFailure:', err);
      },
      onSuccess: (result) => {
        console.log(passwordFirst);
        console.log('call result: ', result);
        navigate('dashboard');
      }
    });
  }
}

Also, based on the documentation, newPasswordRequired takes a function whose signature is different from what you are providing. So I think what you might want is really:

user.authenticateUser(authDetails, {
  onSuccess: (result) => {
    console.log(passwordFirst);
    console.log('call result: ', result);
    navigate('dashboard');
  }
  onFailure: (err) => {
    console.error('onFailure:', err);
  },
  newPasswordRequired: (userAttributes, requiredAttributes) => {
    /*whatever you want to do when new password is required*/
  }
}

Upon reading the documentation further, the userAttributes.email_verified is not allowed to be returned and must be deleted. I did this. However - my application was still not working because the API does not accept the phone_number_verified either in the return call. I have these two lines now:

const onSubmit = (event) => { // first log in attempt with the temporary passcode OR with permanent changed passcode
    event.preventDefault();

    const authDetails = new AuthenticationDetails({
      Username: email,
      Password: password
    });

    const user = new CognitoUser({
      Username: email,
      Pool: UserPool
    });

    user.authenticateUser(authDetails, {
      onSuccess: (data) => {
        console.log('onSuccess:', data);
        if (location.pathname === '/') {
          navigate('dashboard');
        }
      },
      onFailure: (err) => {
        console.error('onFailure:', err);
      },
      newPasswordRequired: (data) => {
        setNewPasscodeRequired(true); // once this is set to true, my application shows a new component which requests the password twice and tells the user the rules for the passcode
      }
    });
  };

  const onSubmitPasscode = (event) => { // once they submit their new passcode
    event.preventDefault();

    if (passwordFirst !== passwordSecond) {
      alert('the two inputs provided are not the same');
    } else {
      const user = new CognitoUser({
        Username: email,
        Pool: UserPool
      });

      const authDetails = new AuthenticationDetails({
        Username: email,
        Password: password
      });

      user.authenticateUser(authDetails, {
        onFailure: (err) => {
          console.error('onFailure:', err);
        },
        onSuccess: (result) => {
          console.log(result);
        },
        newPasswordRequired: (userAttributes, requiredAttributes) => {
          delete userAttributes.email_verified; // THIS IS NON NEGOTIABLE
          delete userAttributes.phone_number_verified; // THIS IS NON NEGOTIABLE
          user.completeNewPasswordChallenge(passwordFirst, userAttributes, {
            onFailure: (err) => {
              console.error('onFailure:', err);
            },
            onSuccess: (result) => {
              console.log('call result: ', result);
              navigate('dashboard');
            }
          });
        }
      });
    }