### Summary

In my Next project i made a MUI Autocomplete component named hsnComp(path:components/hsnComp.tsx) which is working fine as you can see in the given codesandbox(Note that I'm implementing autocompletion using mongoDb, we fetch description(string) and hsCode(string) from mongoDb and shows autocompletion suggestion(format:description(hsCode)) as users type in the textfield).
Problem:
ZodSchema:

hsn:z.object({
description:z.string(),
hsCode:z.string()
}),
#other field
#other field

the problem is that I do not know really how can i use this hsnComp.tsx in page.tsx(form page) and
apply error validation(like required)since in this case I have to register both descriptionand hsCode in the form

CodeSandBox:https://codesandbox.io/p/sandbox/github/Amith-AG/mui_autocomplete/tree/master

GitHub:,https://github.com/Amith-AG/mui_autocomplete.git