hey devs, for some reason the function inside onLoad is not being run for some reason what am i doing wrong?

'use client'

import dayjs from "dayjs";
import relativeTime from 'dayjs/plugin/relativeTime';
import { useLocale } from "next-intl";
import { PortableText } from '@portabletext/react'
import Image from "next/image";
import { urlFor } from "@/sanity/lib/image";
import Link from "next/link";
import { ArrowUpRightIcon } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { useState } from "react";

export default function BlogPost(props: { post: any }) {
  const locale = useLocale();
  const post = props.post;
  const [isLoading, setIsLoading] = useState(true);

  dayjs.extend(relativeTime);
  dayjs.locale(locale);

  const transformDate = (date: string) => {
    let parsedDate = date
    if (locale === 'pt') {
      parsedDate = dayjs(date).format('DD-MM-YYYY'); // Adjust the format as needed
    } else {
      parsedDate = dayjs(date).format('YYYY-MM-DD'); // Adjust the format as needed
    }

    return parsedDate
  }

  if (!post) {
    return <div>No post found</div>
  }

  return (
    <div>
      {post?.mainImage && (
        <>
          {isLoading && <Skeleton className="w-full h-64 rounded-lg" />}
          <Image 
            src={urlFor(post?.mainImage).url()} 
            alt={post?.title} 
            width={1000} 
            height={500} 
            className={`rounded-lg ${isLoading ? 'hidden' : 'block'}`}
            onLoad={() => setIsLoading(false)} 
          />
        </>
      )}
      <h1 className="text-4xl font-bold mt-4 mb-2">{post?.title || 'Unknown'}</h1>
      <span>{post?.authorName || 'Unknown'}</span> • <span>{transformDate(post?.publishedAt || 'Unknown')}</span>

      <PortableText
        value={post?.body}
      />

    </div>
  );
}