Un poco de contexto aquí:

Creé un componente tooltipIconButton personalizado que tiene un componente customIconButton que recibe un montón de accesorios.

 const ToolTipIconButton = (props) => { const { placement='top', toolTipTitle, isDisabled=false, ...otherProps } = props; return ( <Tooltip arrow data-testid='testing-stage' placement={placement} title={isDisabled ? '' : toolTipTitle} > <span> <CustomIconButton isDisabled={isDisabled} {...otherProps} /> </span> </Tooltip> ); };

ahora estoy usando este componente en un par de vistas, algunas de ellas parecen estar bien, pero algunas de ellas aparecen así, es decir, sin espacio.

Supuse que tenía algo que ver con el componente principal, porque dondequiera que este componente tooltipIconButton tenga un elemento principal, digamos un <div><tooltipIconButton/></div> o <Grid><tooltipIconButton/></Grid> , el relleno es remoto.