How to use the @mui-treasury/styles/cardMedia.useWideCardMediaStyles 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 WideCardMedia = () => {
  const styles = useWideCardMediaStyles();
  return (
    
      // image={"src"}
      classes={styles}
    />
  );
};

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

const NewsCard = () => {
  const styles = useStyles();
  const mediaStyles = useWideCardMediaStyles();
  const textCardContentStyles = useTextCardContent01Styles();
  const shadowStyles = useBouncyShadowStyles();
  return (
    
      
      
        
        <button color="{'primary'}">
          Find Out More </button>