Nextjs 12 next/image not providing optimized image in Pagespeed

Question

I am using next/image from NextJs 12 but my problem is the page speed always shows that images are not sized properly.

P.S. I am trying to use this image as background image

Can anyone please guide me where I am doing wrong?

Css file

 .imageContainer > div {
    position: relative
  }


    .image {
    object-fit: cover;
    max-width:  100% !important;
    position: relative !important;
    max-height: 100% !important;
    z-index: -1;
  }

Component

 

const BgImageTag = ({ height, ...rest }) => {
    let widths = {};

    if (!height) {
        height = "100vh"
    }

    return (
         
        <div className={styles.imageContainer} style={{ width: "100vh", height: `${height}` }} >
            <NextImage className={styles.image} quality={100} {...rest} />
        </div>
    );
};

I have tried few implementation (as below) in page - but still not able to find where I am going wrong

<BgImageTag src={e?.image} layout='fill' width={2000} height={800} blurDataURL={`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO8dvFiPQAH9gL5hwtfxQAAAABJRU5ErkJggg==`}         placeholder="blur"                               />


<BgImageTag src={e?.image} layout='fill'    />


<BgImageTag src={e?.image} layout='fill'   blurDataURL={`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO8dvFiPQAH9gL5hwtfxQAAAABJRU5ErkJggg==`}         placeholder="blur"                                     />