Hope this message finds you doing real good
As for me, I'm not doing good at all. Been struggling with an error since. Don't really if I can qualify it as an error. I thing is more of a misunderstanding of something.
Here what I'm facing.
I have a form built with MUI. And in my form I use the Autocomplete MUI component for select element. for the validation, I opted the schema based validation approach with Zod. And for the form, I'm using React Hook Form.
In my schema I defined an object, with only one item, the collection item, which is a string with all the necessary validations.
Each select option is an object. React Hook Form already takes care of onChange event.
Speaking of onChange. Each time I select a new option, in the React Hook Form Devtool, the value of a collection is an object.
What I want to achieve is, set the uuid of the selected option as the value of the Autocomplete and display the corresponding label of that uuid as the label of the selected option.
If that's not possible, I'll like to know if there is a way to tell Zod that it's ok to receive an object as value and then manipulate the sent data on form submission.
This is the Codesandbox link of the working project:
https://codesandbox.io/s/autocomplete-training-lvhkz7
Any help will gladly accepted
Already spent thousands of hours trying to find how to achieve this but NULL
PS: the React Hook Form is the little top right pink box on the document. Attached file.
I Tried to write a custom onChange method instead of the one of Reach Hook Form.