Copy Below Code View As A Text File Show Text Only Show API Edit Code

                            
<Autocomplete
                      // Default value have issue while adding using UseState

                      // defaultValue={[top100Films[0], top100Films[1]]}
                      // defaultValue={selectedUserRoles}
                      defaultValue={selectedRoles}
                      onChange={handleAutoCompleteChange}
                      multiple
                      id="checkboxes-tags-demo"
                      options={allRoles}
                      disableCloseOnSelect
                      getOptionSelected={(option: any, value: any) => option.id === value.id}
                      getOptionLabel={(option: any) => option?.roleName}
                      renderOption={(option: any, { selected }) => {
                        return (
                          <React.Fragment>
                            <Checkbox
                              icon={icon}
                              checkedIcon={checkedIcon}
                              style={{ marginRight: 8 }}
                              checked={selected}
                            />
                            {option?.roleName}
                          </React.Fragment>
                        );
                      }}
                      style={{ width: 500 }}
                      renderInput={(params) => (
                        <TextField
                          style={{ height: "40px" }}
                          {...params}
                          variant="outlined"
                          label="Roles"
                          placeholder="Roles"
                          name="roles"
                        />
                      )}
                    />