undefined value in Controller, after second navigate

[Pavelsmcom]

Hello,

I am experiencing an issue with autocomplete components in my application. Every time an Autocomplete triggers a backend request, the onValueChange callback is called, and I can see the data logged in console.log("1") consistently. Everything works fine when I navigate away from the page and return for the first time using the browser's back and forward buttons.

However, if I navigate away and then return a second time or more, the data is still logged in console.log("1"), but I get undefined in console.log("2"). This issue seems to affect only the first few autocomplete components on the page; the others do not exhibit this problem. It appears to be related to the moment when the component is mounted.

Has anyone encountered a similar problem, or does anyone have suggestions on how to fix this?

Thank you!

const FormAutocomplete = ({ name, control }) => {
  return (
    <Controller
      name={name}
      control={control}
      shouldUnregister={true}
      render={({ field: { value, onChange } }) => {
        console.log('2', value);
        return (
          <Autocomplete
            onValueChange={(value) => {
              console.log('1', value);
              onChange(value);
            }}
            value={value}
          />
        );
      }}
    />
  );
};