NextJS Image component not responding to my inline css inside it

Question

Why isn't styling inside the Image component in NextJS not allowing me to manipulate my image. Am I missing something?

<Image className={styles.bg}
        style={{ transform: `translateY(${offset * 0.5}px)` }}
        src="/../public/bg.jpg"
        // width={2049}
        // height={2049}
        // objectFit="cover"
        layout="fill"
        quality={100}
      />

Answer 1

If Next.js version is less than 12.1.1, this will not work. Onwards there is support for canonical style prop. With the style prop in support for props like layout, objectFit, and objectPosition is removed in Next.js 13.