Name card inside ANTD or MUI multi-select checkbox field

My code for acheieving this is as below

{physiciansData.length && physiciansData.map(item => (
    <Option key={item.name} label={
      <span>{item.name}</span>
    }>
      <Checkbox checked={selected.includes(item.name)} />
      <div className={classes.innerWrapper}>
      <ListItemIcon>
        <Badge overlap="circular"
          anchorOrigin={{ vertical: 'bottom', horizontal: 'right', marginTop: '16px' }}
        >
          <div className={classes.innerContainer}>
            <Avatar sx={{ height: '28px', width: '28px', fontSize: '12px' }}>SM</Avatar>
            <div className={classes.nameContainer}>{item.name}</div>
          </div>
        </Badge>
      </ListItemIcon>
      </div>
    </Option>
  ))}

But after selecting the dropdown checkbox i am not able to show the avatar along with name and also how can i achieve something as like in the image using Ant select or MUI in react js.Any answer might be helpful,thanks