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

const HalfBorderedGrid = () => {
  const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 };
  const borderColor = 'secondary.main';
  const styles = useHalfBorderedGridStyles({ borderColor, colWidth });
  return (
    
      
        {Array(6)
          .fill(0)
          .map((number, i) => (
            // eslint-disable-next-line react/no-array-index-key
            
              
            
          ))}
      
    
  );
};

const useGridProps = size => {
  const GridItemProps = columnConfig[size];
  return {
    gridStyles: useHalfBorderedGridStyles({
      borderColor: '#e9e9e9',
      colWidth: GridItemProps,
    }),
    GridItemProps,
  };
};