Repository: material-ui
Issue: [Autocomplete][JoyUI] Autocomplete bug with searching title but displaying value
Labels: on hold,package: joy-ui

### Possible related issue
https://github.com/mui/material-ui/issues/38360

### Search keywords

autocomplete

### Latest version

- [X] I have tested the latest version

### Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/c8v7xf

Steps:
1. Create list of options using format 
countryCode = [
  { name: 'Afghanistan', code: 'AF', phoneCode: '+93' },
  { name: 'Albania', code: 'AL', phoneCode: '+355' },
  { name: 'Algeria', code: 'DZ', phoneCode: '+213' },
  ....
  ....
2. Create autocomplete and set attribute getOptionLabel={(option) => option.phoneCode}
3. Type in a country name e.g "France" , the options given show a bunch of countries + the filtered search country (e.g France) at the end of the list

I have noted there might be a related issue where there might be wrong search results when there are lots of data - according to issue https://github.com/mui/material-ui/issues/38360


### Current behavior

Autocomplete currently cannot accurately search from list of items when I want to show value selected , but search by label/title/name.

Im using autocomplete for searching for country code , user should be able to search by typing country name , but when selected , the country phone code will be displayed.

If i change the getOptionLabel
from
getOptionLabel={(option) => option.phoneCode}
to
getOptionLabel={(option) => option.name}//name is country name / label/title , autocomplete will work ,but I cannot achieve what I want to achieve with autocomplete
 

### Expected behavior

Autocomplete can correctly search from list of items and when selected , the value ( which is different from the label/title/name) will be shown in the option label instead

### Context


### Your environment

<details>
  <summary><code>npx @mui/envinfo</code></summary>

Tested on Chrome Version 129.0.6668.101 (Official Build) (64-bit)

```
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
    System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (128.0.2739.79)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.5 => 11.11.5
    @mui/base:  5.0.0-beta.42
    @mui/core-downloads-tracker:  6.0.0-dev.240424162023-9968b4889d
    @mui/icons-material: ^5.15.20 => 5.15.20
    @mui/joy: ^5.0.0-beta.36 => 5.0.0-beta.36
    @mui/material: ^5.15.20 => 5.15.20
    @mui/private-theming:  6.0.0-dev.20240529-082515-213b5e33ab
    @mui/styled-engine:  6.0.0-dev.20240529-082515-213b5e33ab
    @mui/system:  6.0.0-dev.240424162023-9968b4889d
    @mui/types:  7.2.14
    @mui/utils:  6.0.0-dev.20240529-082515-213b5e33ab
    @mui/x-date-pickers: ^7.9.0 => 7.9.0
    @types/react: ^18.3.3 => 18.3.3
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.4.3 => 5.4.5
```
</details>



**Search keywords**: autocomplete