Show validation feedback to the user

Question

I am making a simple react form with a react-hook-form and yup as the validator. If the user's input is successfully validated, I want to show some feedback to the user, like a green outline. The problem is that I only want to show the green outline when my input has been validated, not every time the component is rendered. How can I do this? Component:

const schema = yup.object().shape({
  email: yup
    .string()
    .required("This field is required"),
  password: yup.string().required("This field is required"),
});

export const Form = () => {
  const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm({
    mode: "onBlur",
    resolver: yupResolver(schema),
  });

  return (
      <form noValidate onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        {...register("email")}
      />
     {errors.email ? errors?.email.message : null}
       <label htmlFor="password">Password</label>
      <input
        id="password"
        type="password"
        {...register("password")}
      />
      {errors.password ? errors?.password.message : null}
      <button
        type="submit"
      >
        Submit
      </button>
    </form>  
  );
};