Input component invalid prop is not passed to input element correctly

[Rien Stenekes]

I received the following error...

Warning: Received `false` for a non-boolean attribute `invalid`.
If you want to write it to the DOM, pass a string instead: invalid="false" or invalid={value.toString()}.
If you used to conditionally omit it with invalid={condition && value}, pass invalid={condition ? value : undefined} instead.

...when applying this invalid prop:

<Input invalid={hasError} /> // hasError === false

I suppose the component should turn this boolean into a 'true' or 'false' string.

---

Edit: a workaround is using the aria-invalid prop as it is also gets styled properly:

<Input aria-invalid={hasError} /> // hasError === false