How to show a fallback image in the next/image when the browser is not supported the webp format?

Question

Currently, I'm using the Webp image format with the next/image in my project. It's working fine. But, I would like to show the fallback image (PNG or JPG) when the browser is not supported the webp format. How can I do that with the next/image? I have searched all over the place and still can't find a solution.

import Image from 'next/image'

const NextImage = ({imgSrc}) => {
  return (
    <Image 
      src={imgSrc}
      alt="product image"
      width="500px"
      height="500px"
      / >
  )
}