Lingui and yup validator in NextJS

Question

I have a setup with react-hook-form, yup in NextJS for form validation. Lingui for internationalization (followed this documentation). How to setup internationalization in yup validator which is supported by Lingui?

The problem here I am facing is after changing the language, the errors from yup validator is in English.

// src/validation/auth.js

import * as yup from 'yup';
import { t } from '@lingui/macro';

export const signupEmailSchema = yup.object({
  email: yup
    .string()
    .email(
      t({
        id: 'email-valid-validation',
        message: 'Must be a valid email',
      })
    )
    .required(
      t({
        id: 'email-required-validation',
        message: 'Email is a required field',
      })
    ),
});

// pages/auth.js


export const Auth = () => {

 const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm({ resolver: yupResolver(signupEmailSchema) });
}

    <Controller
       name='email'
       control={control}
       render={({ field }) => (
                 <Input
                   placeholder='johndoe@gmail.com'
                      {...field}
                      ref={null}
                    />
              )}
     />
                {errors.email && (
                  <DangerText>
                    // need to display translated errors here
                  </DangerText>
                )}
}

Thank you.