A little context here:

I have created a custom tooltipIconButton component that has a customIconButton component that receives a bunch of props.

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>
);
};

now I am using this component in a couple of views some of them appear fine, but some of them appear like this i.e without spacing.

I figured it has something to do with the parent component, cause wherever this tooltipIconButton component has a parent let's say a <div><tooltipIconButton/></div> or <Grid><tooltipIconButton/></Grid> , the padding is removed.