Metarial-ui(v4) Autocomplete API, how to update style of expanded container

Question

using metarial-ui(v4) autocomplete, it works fine with the code below

All I need is put a seperator horizontal line top of each group title as seem in pic below:

Component:

const useStyles = makeStyles({
  paper: {
    borderRadius: 0,
  },
})

export default function Grouped(props: any) {
  const { handleAddUserGroup, options, selectedOptions } = props
  const classes = useStyles()

  return (
    <div>
      <Autocomplete
        value={selectedOptions}
        onChange={(event: any, value: any) => handleAddUserGroup(value)}
        disableCloseOnSelect
        multiple
        style={{ width: '100%' }}
        id="grouped-demo"
        classes={{ paper: classes.paper }}
        options={options.sort(
          (a: { type: any }, b: { type: string }) => -b.type.localeCompare(a.type),
        )}
        groupBy={option => option.type}
        getOptionLabel={option => option.name}
        renderInput={params => <TextField {...params} placeholder="Search" />}
        renderOption={(option, { selected }) => (
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Radio
              checked={selected}
              color="default"
              inputProps={{ 'aria-label': 'choice' }}
              style={{
                placeSelf: 'center',
                color: selected ? color.palette.green : color.shade30,
              }}
            />
            {option.name}
          </div>
        )}
      />
    </div>
  )
}

Ho to put this line?