Developed an autocomplete asyn component but unable to integrate it with the form.

[adityapatil9191]

Hello ,
I have developed an autocomplete async component that makes an API call but I am unable to integrate it with the form.
The values of the component are not getting captured. Here is a sandbox url
https://codesandbox.io/p/sandbox/react-data-driven-autocomplete-forked-hsqjll?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clydrsw0v00063b6mvcsue5lj%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clydrsw0u00023b6mqqnxvh9m%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clydrsw0u00033b6m8l866f9r%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clydrsw0v00053b6m397dpp0d%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clydrsw0u00023b6mqqnxvh9m%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clydrsw0u00013b6mkmnfteo1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clydrsw0u00023b6mqqnxvh9m%2522%252C%2522activeTabId%2522%253A%2522clydrsw0u00013b6mkmnfteo1%2522%257D%252C%2522clydrsw0v00053b6m397dpp0d%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clydrsw0u00043b6m1b73s421%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252Fform%2522%257D%255D%252C%2522id%2522%253A%2522clydrsw0v00053b6m397dpp0d%2522%252C%2522activeTabId%2522%253A%2522clydrsw0u00043b6m1b73s421%2522%257D%252C%2522clydrsw0u00033b6m8l866f9r%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clydrsw0u00033b6m8l866f9r%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[adityapatil9191]

The values are not getting capture on form submit

[Hyperkid123]

One thing I noticed is that there is this warning constantly:

Material-UI: The value provided to Autocomplete is invalid.
None of the options match with `""`.
You can use the `isOptionEqualToValue` prop to customize the equality test. 

This happens because you are constantly clearing the options back to an empty/new array. You can't do that if you also want to keep the values. You should only add the new value to the options list after the query or would have to delete the preview value of the input whenever the selected options change.

If I stop resetting the options constantly, I do see the value when I submit the form.

[adityapatil9191]

@Hyperkid123 the warning still exists could you please help me with the exact code change here?

[Hyperkid123]

Just check your all setOptions calls and make sure you are adding items not, resetting the array.