Required field registration issues in a Mui Autocomplete Input Andornment

[keithglassford]

Hi,

I have a Mui form controlled by RHF where there is a controlled TextField with another controlled Autocomplete TextField as an InputProps endAdornment. Please see CSB: https://codesandbox.io/s/formstateissue-hg4ww6?file=/src/App.js for reference.

I would like form validation on both the main TextField as well as that in the InputAdornment TextField; however, I am having problems getting the validation to work on InputAdorment TextField which doesn't appear to be registering.

When clicking the Save button, the console.log shows "Not Valid" when neither are entered which is expected. However, when a number has been entered in the left input field and Save is clicked, it's Valid? The expectation is that the form is not valid until both a number and a unit have been entered.

Any guidance would be appreciated as I can't seem to figure out what I am doing wrong.

Thanks,

Keith