unable to add onChange props in react-select's multi selection in ReactJS Typescript?

In ReactJS, I'm using react-select to implement the multi-select dropdown field, like below but when I try to add onchange props, I'm getting this issue

ERROR in src/components/Pages/CreatePage.tsx:196:25
TS2322: Type '(selected: Vehicle[] | null) => void' is not assignable to type '(newValue: MultiValue<Vehicle>, actionMeta: ActionMeta<Vehicle>) => void'.
  Types of parameters 'selected' and 'newValue' are incompatible.
    The type 'MultiValue<Vehicle>' is 'readonly' and cannot be assigned to the mutable type 'Vehicle[]'.
    194 |                         isClearable={true}
    195 |                         backspaceRemovesValue={true}
  > 196 |                         onChange={handleSelectChange}
        |                         ^^^^^^^^
    197 |                         
    198 |                     />

> Code I tried

    import Select from 'react-select';


    interface Vehicle {
       id: number;
       make: string;
       model: string;
       year: number;
   }

   const vehicles: Vehicle[] = [{
       id: 1,
       make: 'Ford',
       model: 'Fiesta',
       year: 2003,
   }, {
       id: 7,
       make: 'Audi',
       model: 'A4',
       year: 2009,
   }, ];

   const YourComponent: React.FC = () => {
       const [Vehicles, setVehicles] = useState < Vehicle[] > ([]);
       const handleSelectChange = (selected: Vehicle[] | null) => {
           if (selected) {
               setVehicles(selected);
           }
       };
       return (
                     <Select
                        isMulti
                        getOptionLabel={(vehicle: Vehicle) => vehicle.model}
                        getOptionValue={(vehicle: Vehicle) => vehicle.model}
                        options={vehicles}
                        isClearable={true}
                        backspaceRemovesValue={true}
                        // onChange={handleSelectChange}     
                    />);
   };

   export default YourComponent;

react-select@^5.7.2

You have two choices:

1. Use OnChangeValue<Option, true>.

Let's check the this type:

export declare type SingleValue<Option> = Option | null;
export declare type MultiValue<Option> = readonly Option[];

//...
export declare type OnChangeValue<Option, IsMulti extends boolean> = IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;

It uses TS conditional type, if isMulti is true, then the final type is readonly Option[].

This mentioned at documentation:

IsMulti extends boolean = false
> This type is false for single-selects and is true for multi-selects. It defaults to false for the exported components because TypeScript isn't smart enough to figure out that it should be false if the isMulti prop is not specified, but on other exported interfaces it defaults to boolean so that it handles both single-select and multi-select values. This generic is primarily used to determine the type of the first argument passed to onChange which will be Option | null if IsMulti is false and will be readonly Option[] if IsMulti is true.

const YourComponent: React.FC = () => {
	const [Vehicles, setVehicles] = React.useState<readonly Vehicle[]>([]);
	const handleSelectChange = (selected: OnChangeValue<Vehicle, true>, actionMeta: ActionMeta<Vehicle>) => {
		console.log(selected, actionMeta);
		if (selected) {
			setVehicles(selected);
		}
	};
	return (
		<Select
			isMulti
			getOptionLabel={(vehicle: Vehicle) => vehicle.model}
			getOptionValue={(vehicle: Vehicle) => vehicle.model}
			options={vehicles}
			isClearable={true}
			backspaceRemovesValue={true}
			onChange={handleSelectChange}
		/>
	);
};

codesandbox

2. Use read-only Option[] mentioned at official documentation

Besides, we have to declare the type for state as readonly.

const YourComponent: React.FC = () => {
    const [Vehicles, setVehicles] = React.useState<readonly Vehicle[]>([]);
    const handleSelectChange = (selected: readonly Vehicle[], actionMeta: ActionMeta<Vehicle>) => {
        console.log(selected, actionMeta);
        if (selected) {
            setVehicles(selected);
        }
    };
    return (
        <Select
            isMulti
            getOptionLabel={(vehicle: Vehicle) => vehicle.model}
            getOptionValue={(vehicle: Vehicle) => vehicle.model}
            options={vehicles}
            isClearable={true}
            backspaceRemovesValue={true}
            onChange={handleSelectChange}
        />
    );
};