I am trying to set diffenet images for mobile and desktop with <picture> tag using the experimental unstable_getImgProps. Everything is working fine, but I am not able to set the sizes attribute. As a result my mobile images are larger than the viewport. Is there a way to use sizes with picture?

As you can see in my code, i tried to sizes both to <source> and <image> but it is not working. (but with <image> element it does work!)

Can anyone help me with this?

const Hero = () => {
  const {props: { srcSet: desktop, width: dWidth, height: dHeight}} = getImgProps({src: chenImg})
  const {props: { srcSet: mobile, width: mWidth, height: mHeight}} = getImgProps({src: chenImgM})
  return (
    <picture>
      <source media={mobileMedia} srcSet={mobile} width={mWidth} height={mHeight} sizes="10vw"/>
      <source media={desktopMedia} srcSet={desktop} width={dWidth} height={dHeight} sizes="10vw" /> 
      <img 
        src={chenImg.src} 
        alt="איך אפשר לעזור" 
        sizes="10vw"
      />
   </picture>
  )
}