'Material UI Autocomplete doesnt mark checkbox with pre loaded values

I want to set Autocomplete with my data already loaded. But its not working for checkbox field. I'd like to mark them

Check the code below:

const [extensions, setExtensions] = useState([{value: 1, label: 'Excel', extension: 'xls'},{value: 3, label: 'PDF', extension: 'pdf'}]);


<Autocomplete
    multiple
    id="extensions"
    limitTags={1}
    className="autocompleCreate"
    options={extensionList}
    value={extensions}
    disableClearable={true}
    onChange={(event, value) => {
        setExtensions(value);}
    }
    openText={props.t("activity_report_autocomplete_open")}
    closeText={props.t("activity_report_autocomplete_close")}
    getOptionLabel={(option) => option.label}
    renderOption={(option, { selected }) => (
        <React.Fragment>
            <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
            />
            {option.label}
        </React.Fragment>
    )}
    disabled={type === 3 ? true : false}
    style={{ width: 600, marginRight : 100 }}
    renderInput={(params) => (
        <TextField {...input} {...params} variant="filled" label={props.t("label_configuration_create_extensions")} />
    )}
/>

enter image description here

extensionList contains others extensions (others options like Word).

How can I solved it?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source