Need to reference/access Yup.ref() value within the message of yup min and max validations

Question

I have the following Yup validation and unsure how to reference the Yup.ref(a) value within the message of that .min() and .max(), i.e.:

  checkPercent: Yup.number()
    .when("summaryFlag", {
      is: true,
      then: Yup.number()
        .typeError('Value must be a number')
        .required('Value is required')
        .positive()
        .min(Yup.ref("percentLower"), `{The value must be > xx`)
        .max(Yup.ref("percentUpper"), `{The value must be < yy`)
  })

Using the above, how can I replace xx in my .min message with the actual value of Yup.ref("percentLower") ?

The same for yy to be replaced with the value of Yup.ref("percentUpper") ?

I tried using template literals syntax but it didn't work, i.e.:

.min(Yup.ref("percentLower"), {The value must be > ${Yup.ref("percentLower")})

Answer 1

You can pass a function as the second argument to the min function. This function receives the actual value of the percentLower field.

.min(
  Yup.ref("percentLower"),
  ({ min }) => `The value must be > ${min}`
)

Ref: Yup documentation