I am using v7 react hook form and mui, my radio btn choices should been saved as boolean, default value can be null, false or true as boolean(except null). I choose false and click submit, throws required error although there is a choice with false option. My FormFieldBox and StyledRadioGroup components are just for styling.

I’m working on a React application using react-hook-form and @mui/material, and I have a form that includes an Autocomplete component for selecting multiple values. The issue I’m facing is that when I submit the form, the value of the Autocomplete field resets to its initial state.

I need to submit the form with react hook form with zod validation. But in my condition, the submit button was outside of the form tag. So I used the id form method. ( please sudjust any other method as well. )

I have a main component here: