in next/image onLoad or onLoadingComplete not trigger any function

[ArishN]

here is my code onLoadingComplete not trigger the handleImageLoaded i am also try onLoad it also not work. can anyone helps with this.

"use client"
import Image from 'next/image'
import { useState } from 'react'
import ImageSkeleton from './Components/ImageSkeleton'

export default function Home() {
const [loading, setLoading] = useState(true);

const handleImageLoaded = () => {
console.log("Image loaded!"); // Check if this message appears in the console
setLoading(false);
};

console.log("Rendering component. Loading:", loading); // Check if this message appears in the console

return (

{loading ? (

) : (
<Image
src={"https://images.pexels.com/photos/12843871/pexels-photo-12843871.jpeg"}
width={200}
height={200}
alt={"image"}
onLoadingComplete={handleImageLoaded}
/>
)}

);
}

[ArishN]

sorry for this i made a mistake {loading ? (

) : ( ) when i use this it not allow to make render the Image that why the onLoad not trigger

[marcuspx]

how did you do dude?