Hi, I am unable to configure fallback image on image not found for local images. Is it possible?

"use client";

import * as React from "react";
import Image from "next/image";
import fallbackImage from "@/assets/dietImages/noImage.png";

export default function ImageWithFallback({ alt, src, ...props }: any) {
  const [image, setImage] = React.useState(src);

  const handleErrorCheck = () => {
    setImage(fallbackImage);
  };

  return (
    <Image alt={alt} onErrorCapture={handleErrorCheck} src={image} {...props} />
  );
}