ErrorMessage msg should not be a string

[kishaningithub]

In my typescript react project, I have integrated yup with react-intl so that error messages can be multiple languages. The way i have configured this is

setLocale({
  mixed: {
    required: () => ({ id: "validation.required" })
  },
  string: {
    email: () => ({ id: "validation.email" })
  },
  number: {
    positive: () => ({ id: "validation.positive" }),
    integer: () => ({ id: "validation.integer" }),
    min: ({ min }) => ({ id: "validation.min", values: { min: min } }),
    max: ({ max }) => ({ id: "validation.max", values: { max: max } }),
    lessThan: ({ less }) => ({
      id: "validation.lessThan",
      values: { less: less }
    })
  }
});

Because of this the error message message now actually is of the form {"id": "validation.positive" } but the following code fails to compile as the "msg" variable is of type "string"

<ErrorMessage 
     name={name}
     render={msg => <FormattedMessage id={msg.id}/>}
 />

My Ugly Temporary Fix

<ErrorMessage 
     name={name}
     render={msg => <FormattedMessage id={JSON.parse(JSON.stringify(msg)).id}/>}
 />

Your environment

Software	Version(s)
Formik	1.5.8
React	16.9.0
TypeScript	3.5.3
Browser	v10.16.3
npm/Yarn	v10.16.3
Operating System	Mac os