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

const LightTopShadow = () => {
  const styles = useLightTopShadowStyles({
    // inactive: true, // add this line to disable hover effect
  });
  return ;
};

const NewsCard2 = () => {
  const styles = useStyles();
  const mediaStyles = useCoverCardMediaStyles();
  const shadowStyles = useLightTopShadowStyles();
  return (
    
      
      
        
          
            <h1>Space</h1>
            <p>The space between the stars and galaxies is largely empty.</p>

const ProjectCard = () => {
  const styles = useTextCardContent03Styles();
  const shadowStyles = useLightTopShadowStyles();
  const cardStyles = useStyles();
  return (
    
      
      
        
      
    
  );