Responsive images are repeatedly loading in the network tab in Chrome developer tools.

[andyNuu]

I have responsive images generated when adding media to a model. I noticed only when I have responsive images in the blade view and I look in the network tab, the image is continuously loading another image and the page size is progressively growing with each load of the image. It does correctly load the responsive image with srcset so can't see it happening on the page only in the network tab.

The only thing different I noticed was when the responsive images are created, the directory is "responsive" vs in the video in the docs it shows the directory as "responsive-images".

Adding an image:

$mediaModel->addMedia($item->getRealPath())
            ->withResponsiveImages()
            ->usingName($fileNameNoExtension)
            ->usingFileName($fileNameWithExtension)
            ->withCustomProperties(
                [
                    'width' => $width,
                    'height' => $height,
                ]
            )
            ->toMediaCollection($collectionName);

Blade view:
{{$product->getFirstMedia('product-images')}}

Initially I thought is was something to do with Livewire but I also tried when not using Livewire and had the same issue. Any thoughts as to what I'm doing wrong?