<picture>
                    {/* Smallest image for mobile */}
                    <source
                      media="(max-width: 736px)"
                      srcSet={`${data?.images?.[index]?.imgUrlRoot}${data?.images?.[index]?.imageFileName}_Mobile.webp`}
                    />
                    {/* Tablet size image */}
                    <source
                      media="(max-width: 1024px)"
                      srcSet={`${data?.images?.[index]?.imgUrlRoot}${data?.images?.[index]?.imageFileName}_Tablet.webp`}
                    />
                    {/* Default image for larger screens */}
                    <img
                      src={`${data?.images?.[index]?.imgUrlRoot}${data?.images?.[index]?.imageFileName}_1920x1080.webp`}
                      alt={data?.images?.[0]?.seoAlt}
                      className={styles.headerImage}
                    />
                  </picture>

I tested each url in the browser and they display their images fine. I dont see any request for new sized images when I resize the browser in chrome dev tools. Any ideas why?