Tengo problemas con una flecha roja '::before' pseudoelemento que se corta parcialmente fuera de su '.MuiPaper-root' . Me gustaría que siguiera siendo visible, ¿alguna sugerencia?

A continuación, proporcioné el código relevante y las capturas de pantalla:

 const useStyles = makeStyles(theme => ({ root: { left: '5rem !important', '& .MuiPaper-root': { '&::before': { position: 'absolute', left: '4rem', display: 'inline-block', top: '-3.9rem', fontSize: '5rem', fontFamily: 'Material Icons', content: '"arrow_drop_up"', color: 'red', zIndex: '5 !important', }, }, }, })); <S.Item style={{ alignSelf: 'stretch' }}> <S.ItemGrid> <S.Title>Guest rating</S.Title> <S.Rating> <FormControl style={{ width: '10rem' }}> <S.StyledSelect defaultValue={3.5} value={rating.currency} onChange={changeRating('currency')} renderValue={option => option.value} MenuProps={{ classes: { root: classes.root }, }} > {ratings.map(option => ( <S.StyledMenuItem key={option.value} value={option}> <div>{option.value}</div> <div>{option.label}</div> </S.StyledMenuItem> ))} </S.StyledSelect> </FormControl> </S.Rating> </S.ItemGrid> </S.Item>