Vega input validation does not work with react

Vega input validation is not working when hiding and showing elements in react.

Run the following code to show the error

import { VegaButton, VegaInput } from '@heartlandone/vega-react';import { useState } from 'react';
//this shows that Vega validation still has an error
const Test = () => { const [name, setName] = useState<string>(''); const [nameValid, setNameValid] = useState<boolean>(false); const [showName, setShowName] = useState<boolean>(true); const [formValid, setFormValid] = useState<number>(0);
const validate = () => { setFormValid(formValid + 1); if (nameValid) setShowName(false); };
return ( <div> {showName && ( <VegaInput label="test" autoValidation={false} formValidation={formValid} required={true} onVegaChange={(e: any) => setName(e.currentTarget.value)}></VegaInput> )} <VegaButton label="Test" onVegaClick={() => { if (!showName) { setShowName(true); } else validate(); }}></VegaButton> </div> );};
export default Test;