How to use the @mui-treasury/styles/gutter.usePushingGutter function in @mui-treasury/styles

const FirebaseButton = () => {
  const styles = useFirebaseBtnStyles();
  const gutterStyles = usePushingGutter();
  return (
    <div>
      <button>Default</button>
      <button color="{'primary'}">
        Contained
      </button>
    </div>
  );
};

const InvertedArrow = () => {
  const classes = useInvertedArrowStyles();
  const gutterStyles = usePushingGutter({ firstExcluded: true, space: 2 });
  return (
    
      <button>
        
      </button>
      <button>
        
      </button>
    
  );
};

const ReviewCard = () => {
  const styles = useStyles();
  const mediaStyles = useWideCardMediaStyles();
  const shadowStyles = useFadedShadowStyles();
  const gutterStyles = usePushingGutter({ firstExcluded: true });
  return (
    
      
      
        
          
        
        <h3>Colloseo</h3>
        
          
          <span>Rome</span>

const ReviewCard2 = () => {
  const styles = useStyles();
  const gutterStyles = usePushingGutter({ space: 1.5 });
  const labelStyles = useLabelIconStyles({ linked: true });
  const flexStyles = useRowFlexStyles();
  return (
    
      
        
          <h3>Aegen magazines </h3>
          
        
        <p>
          Lorem ipsum is placeholder text commonly used in the graphic, print,</p>

const SimpleArrow = () => {
  const classes = useSimpleArrowStyles();
  const gutterStyles = usePushingGutter({ firstExcluded: true, space: 2 });
  return (
    
      <button>
        
      </button>
      <button>
        
      </button>
    
  );
};