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

const EngagementCard = () => {
  const cardStyles = useStyles();
  const wideCardMediaStyles = useWideCardMediaStyles();
  const fadeShadowStyles = useFadedShadowStyles();
  const textCardContentStyles = useTextCardContent01Styles();
  return (
    
      
        classes={wideCardMediaStyles}
        image={MOCK.natureImg}
      />

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

const ElevatedHeaderCard = () => {
  const classes = useStyles();
  const cardHeaderStyles = useContainedCardHeaderStyles();
  const cardShadowStyles = useSoftRiseShadowStyles({ inactive: true });
  const cardHeaderShadowStyles = useFadedShadowStyles();
  return (
    
      
      
        
            
              Dessert
              Fat (g)
              Price ($)
            <table>
          </table>

const ProfileCard = () => {
  const styles = useStyles();
  const shadowStyles = useFadedShadowStyles();
  const borderedGridStyles = useGutterBorderedGridStyles({
    borderColor: 'rgba(0, 0, 0, 0.08)',
    height: '50%',
  });
  return (
    
      
        
        <h3>Alan Podemski</h3>
        <span>Poland</span>
      
      
      
        
          <p>Followers</p>
          <p>6941</p>

const FadedShadow = () => {
  const styles = useFadedShadowStyles();
  return ;
};