<img> sizes attribute not able to override base image width/height

I have this image on my website and I'd like to add width/height as good practices to avoid CLS.

<img
  src="/img/image@1x.jpg"
  alt="Test image"
  sizes="(max-width: 767px) 320px, 378px"
  srcset="/img/protect@2x.jpg 758w, /img/protect@3x.jpg 1138w"
>

This is what I did (added the @1x image dimensions as width/height).

<img
  src="/img/image@1x.jpg"
  width="378"
  height="252"
  alt="Test image"
  sizes="(max-width: 767px) 320px, 378px"
  srcset="/img/protect@2x.jpg 758w, /img/protect@3x.jpg 1138w"
>

However, the image now remains the same size regardless of the browser width, as if sizes wasn't here, do I need extra CSS to make it work ?