React hook form Material Autocomplete don't match option to value on fetching data

Viewed 32

I have a problem that after fetching my categories and business entity my autocomplete don't match value preview for Material Autocomplete. I am using react hook forms and in Autoselect I am trying to save only id instead of the whole object. How can I customize isOptionEqualToValue to show preview that my id ("ect345-8") equals to one of the option {id: "ect345-8", title: "main"}

<Controller
            control={control}
            name="category_id"
            render={({ field: { ref, onChange } }: any) => (
              <Autocomplete
                options={categories}
                isOptionEqualToValue={(option: any, value: any) =>
                  option.id === value.id
                }
                onChange={(_, data: any) => onChange(data.id)}
                getOptionLabel={(option) => `${option.title}`}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    placeholder="Choose category"
                    inputRef={ref}
                    variant="outlined"
                    name="category_id"
                  />
                )}
              />
            )}
          />
0 Answers
Related