[Autocomplete] Multiple async selection + react-hook-form causes inconsistent view

[Michele-Masciave]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/zlgt6x
2. Type on the autocomplete
3. Select some options

Current behavior

1. The current text is not visible on typing
2. The selected options are not visible as chips once selected

Expected behavior

1. The current text is visible on typing
2. The selected options are visible as chips once selected

Context

I'm implementing an async type ahead using the Autocomplete component and react-hook-form. While for the static standard/multiple implementation it was quite straight, I'm dealing with the following issue for the async multiple case.

The value looks not consistent between the Form and the view.
Besides the debounce logic that can be simplified, I tried also to save the selected values onChange in a new state to simultaneously maintain value and options, but I'm still not able to see the selected options in the autocomplete.

Your environment

Running on a nodebox.

react: 18.2
mui/material: 6.1.8
react-hook-form: 7.46.1
browser: Chrome (Version 131.0.6778.86 (Official Build) (64-bit))

Search keywords: autocomplete, multiple, react-hook-form

[Harsh517-tech415]

hey can you please assign this issue to me, still this i tried to solve it.
Thanks

[Harsh517-tech415]

Fixed
Text Visibility: The issue where the text wasn’t visible while typing was resolved by manually handling the inputValue in the onInputChange event.
Selected Chips: The issue where selected options weren’t displayed as chips was fixed by moving {params.InputProps.startAdornment} outside the condition in renderInput, ensuring chips are consistently visible.
You can check the updated behavior here: [Fixed Sandbox Link]

Let me know if you have any further questions!