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

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

const MuiButton = () => {
  const gutterStyles = usePushingGutter({
    cssProp: 'margin',
    space: [2, 2, 0, 0],
  });
  return (
    <div>
      <button>Simple Text</button>
      <button color="{'primary'}">
        Contained
      </button>
      <button color="{'secondary'}">
        Outlined
      </button>
    </div>
  );
};

const GradientBtn = () => {
  const styles = useGradientBtnStyles();
  const chubbyStyles = useGradientBtnStyles({ chubby: true });
  const gutterStyles = usePushingGutter({ cssProp: 'marginBottom', space: 2 });
  return (
    <div>
      <div>
        <button>Default</button>
      </div>
      <div>
        <button>Chubby</button>
      </div>
    </div>
  );
};

const TwitterButton = () => {
  const styles = useTwitterBtnStyles();
  const mainStyles = usePushingGutter({
    cssProp: 'marginTop',
    space: 2,
    firstExcluded: true,
  });
  const wrapperStyles = usePushingGutter();
  return (
    <div>
      <div>
        <button color="{'primary'}">
          Normal
        </button>
        <button size="{'large'}" color="{'primary'}">
          Large Button
        </button>
      </div>
      <div></div></div>

const TwitterButton = () => {
  const styles = useTwitterBtnStyles();
  const mainStyles = usePushingGutter({
    cssProp: 'marginTop',
    space: 2,
    firstExcluded: true,
  });
  const wrapperStyles = usePushingGutter();
  return (
    <div>
      <div>
        <button color="{'primary'}">
          Normal
        </button>
        </div></div>