I am using MUI v5 Autocomplete for my dropdown.

I have options with title and id when an option is selected, I want to store the id in the state, also want to update the select (autocomplete here) value with selected movie.

The textbox in the select is not reflecting the value set using value props.

I tried isOptionEqualToValue but it helps to highlight the value when the dropdown is open. When drop-down is closed, the selected movie name is not reflected.

https://codesandbox.io/s/combobox-material-demo-forked-osex0?file=/demo.js

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

export default function ComboBox() {
  const [movie, setMovie] = React.useState(2);

  return (
    <>
      Movie ID value in the state {movie}
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        value={movie == null ? "" : movie}
        options={top100Films}
        onChange={(e, data) => {
          if (data && data.id) {
            setMovie(data.id);
          }
        }}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
        isOptionEqualToValue={(option, value) => option.id === value}
      />
    </>
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", id: 1 },
  { title: "The Godfather", id: 2 },
  { title: "The Godfather: Part II", id: 3 }
];

Even when the option is selected, it is not reflecting in the textbox