How to use the @govuk-react/lib.shape.arrow function in @govuk-react/lib

const Anchor = styled('a')(
  typography.font({ size: 16 }),
  link.common(),
  link.styleText,
  {
    display: 'inline-block',
    position: 'relative',
    // margins here are not responsive, hence why they're not specified using withWhiteSpace
    marginTop: SPACING_POINTS[3],
    marginBottom: SPACING_POINTS[3],
    paddingLeft: '14px',
    borderBottom: `1px solid ${BLACK}`,
    textDecoration: 'none',
    '::before': {
      ...shape.arrow({ direction: 'left', base: 10, height: 6 }),

      content: "''",
      position: 'absolute',
      top: '-1px',
      bottom: '1px',
      left: 0,
      margin: 'auto',
    },
  },
  spacing.withWhiteSpace(),
);

/**
 *
 * ### Usage
 *

'::-webkit-details-marker': {
    display: 'none',
  },

  ':before': {
    content: '""',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    margin: 'auto',

    ...shape.arrow({ direction: 'right', base: 14 }),

    '[open] > &': shape.arrow({ direction: 'down', base: 14 }),
  },
});

const SummaryText = styled('span')({
  textDecoration: 'underline',
});

const DetailsText = styled('div')({
  padding: SPACING_POINTS[3],
  paddingLeft: SPACING_POINTS[4],
  borderLeft: `${BORDER_WIDTH} solid ${BORDER_COLOUR}`,

  p: {
    marginTop: 0,
    marginBottom: SPACING_POINTS[4],
  },

background: FOCUS_COLOUR,
  },

  '::-webkit-details-marker': {
    display: 'none',
  },

  ':before': {
    content: '""',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    margin: 'auto',

    ...shape.arrow({ direction: 'right', base: 14 }),

    '[open] > &': shape.arrow({ direction: 'down', base: 14 }),
  },
});

const SummaryText = styled('span')({
  textDecoration: 'underline',
});

const DetailsText = styled('div')({
  padding: SPACING_POINTS[3],
  paddingLeft: SPACING_POINTS[4],
  borderLeft: `${BORDER_WIDTH} solid ${BORDER_COLOUR}`,

  p: {
    marginTop: 0,