MUI Autocomplete Customization. How to render and set as value one property, but search by another?

export const countries = [
  { code: '', label: '', phone: '' },
  { code: 'AD', label: 'Andorra', phone: '376' },
  {
    code: 'AE',
    label: 'United Arab Emirates',
    phone: '971',
  },
  { code: 'AF', label: 'Afghanistan', phone: '93' }
]

<Controller
  name="userDTO.phoneCode"
  control={control}
  render={({ field, fieldState: { error } }) => (
    <Autocomplete
      {...field}
      options={countries.map((country) => country.label)}
      getOptionLabel={(option) => option}
      onChange={(event, newValue) => setValue("userDTO.phoneCode", newValue, { shouldValidate: true })}
      renderInput={(params) => {
        const selectedCountry = countries.find( (country) => country.label === params.inputProps.value );
        const { code, label, phone } = selectedCountry || {
          code: "",
          label: "",
          phone: "",
        };
        return ( 
          <TextField
            {...params}
            InputProps={{
              ...params.InputProps,
              startAdornment: (
                <InputAdornment position="start">
                  <Iconify
                    key={label}
                    icon={`circle-flags:${code.toLowerCase()}`}
                    width={28}
                    sx={{mr: 1}}
                  />
                </InputAdornment>)
            }}
            label="Phone Code"
         />);
      }}
      renderOption={(props, option) => {
        const {code, label, phone} = countries.filter( (country) => country.label === option )[0];

        if (!label) {
          return null;
        }

        return (
          <li {...props} key={label}>
            <Iconify
              key={label}
              icon={`circle-flags:${code.toLowerCase()}`}
              width={28}
              sx={{mr: 1}}
           />
            {label} ({code}) +{phone}
           </li>
       );
     }}
   />
 )}
/>

This code will render Autocomplete with search by country.label, country.label as selected value, and country.label will be in submitted data. How to customize this code to have search by country.label, render country.phone and set country.phone as value?

I've read a documentation, but did not found solution.

You can use the filterOptions property from the Autocomplete API. With it you can customize the search, in this case something like this I think would work:

filterOptions={(options,state) => {
   return countries.filter(country => 
     country.label.includes(state.inputValue)).map(country => country.phone);
}}

In options you receive the autocomplete options array and in state you have the user input.