I have a MUI v5 Textfield select component. Each option has a play button, avatar and option text. Everything works fine in dropdown list. But how can I make play button work (do something) if it is selected? At the moment if user clicks on it then option list opens.

const StyledSelect = ({ ...props }) => {
  return (
    <TextField {...props} select fullWidth>
      {props.children}
    </TextField>
  );
};

export const AudioSelect = () => {
  return (
    <StyledSelect>
      {AUDIO_OPTIONS.map(({ id, name, avatar, voice }) => (
        <MenuItem key={id} value={id}>
          <Stack>
            <PlayAudioButton
              sound={voice}
              key={id}
              onPlay={() => console.log("play button "   id)}
              isPlaying={false}
            />
            <Avatar src={avatar} />
            <Typography>{name}</Typography>
          </Stack>
        </MenuItem>
      ))}
    </StyledSelect>
  );
};

Here's codesandbox: