JAVASCRIPT

controlled autocomplete material ui

<Controller
  defaultValue={null}
  name={"name"}
  control={control}
  rules={{
    required: true, // for mandatory field
    validate: (data) => { // checking whether array is empty or not
    	if(data.length === 0) return false 
    }}
  }
  render={({value, name, onChange}) => (
  	<Autocomplete
      value={value}
      multiple
      name={name}
      size="small"
      id="status"
      options={options}
      disableCloseOnSelect
      onChange={(e, v) => {onChange(v);} }
      getOptionLabel={(option) => option.name}
      renderOption={(props, option, { selected }) => (
        <li {...props}>
          <Checkbox
          icon={icon}
          checkedIcon={checkedIcon}
          style={{ marginRight: 8 }}
          checked={selected}
        />
        	{option.name}
        </li>
      )}
      style={{ width: 250 }}
      renderInput={(params) => (
      	<TextField {...params} /* error={errors.name ? true : false} */ variant="outlined" label="Select" />
      )}
    />
  )}
/>