React prop name collision between 3rd-party libraries

Question

How can I can prevent errors between 3rd-party libraries when they use the same prop name but expect different data types for that prop?

Example: Material-UI's FormControl component expects the 'error' prop to be a boolean, but I'm using Yup (and Formik) for form validation, which sends a string also labeled 'error'. React is saying this in the console:

"Failed prop type: Invalid prop error of type string supplied to FormControl, expected boolean"

My app works despite the error, but I'd like to get rid of it if possible.

Answer 1

You can parse your error string to bool value using !!

<FormControl {...props} error={!!yourError} />

What is the !! (not not) operator in JavaScript? for more detail.