Next Image with placeholder and error handler

CustomImage.jsx

function CustomImage({...props}: ImageProps) {
  const [src, setSrc] = React.useState(props.src);

  return (
    <Image
      onError={() => setSrc('/assets/image-error.png')}
      placeholder="blur"
      blurDataURL="/assets/image-placeholder.png"
      {...props}
      src={src}
    />
  );
}

CustomImage.tsx

import Image, {ImageProps} from 'next/image';

function CustomImage({alt, ...props}: ImageProps) {
  const [src, setSrc] = React.useState(props.src);

  return (
    <Image
      {...props}
      src={src}
      alt={alt}
      onError={() => setSrc('/assets/image-error.png')}
      placeholder="blur"
      blurDataURL="/assets/image-placeholder.png"
    />
  );
}

index.jsx

import React from 'react';
import { CustomImage } from '../components/CustomImage';

export default function IndexPage() {
  return (
    <CustomImage
      src="https://i.imgur.com/gf3TZMr.jpeg"
      layout="fixed"
      height={500}
      width={700}
      alt={'alt'}
    />
  );
}