import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
interface IFilims {
  label: string;
  year: number;
}
const top100Films: IFilims[] = [
  { label: "The Shawshank Redemption", year: 1994 },
  { label: "The Godfather", year: 1972 },
  { label: "The Godfather: Part II", year: 1974 },
  { label: "The Dark Knight", year: 2008 },
  { label: "12 Angry Men", year: 1957 },

];
export default function ComboBox() {
  const [selectedFilims, setSelectedFilims] = React.useState<IFilims[]>([]);

  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Films}
      value={selectedFilims}
      multiple
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
      onChange={(e, v) => setSelectedFilims(v)}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top

(parameter) v: readonly IFilims[]
Argument of type 'readonly IFilims[]' is not assignable to parameter of type 'SetStateAction<IFilims[]>'.
  The type 'readonly IFilims[]' is 'readonly' and cannot be assigned to the mutable type 'IFilims[]'.ts(2345)