Linear Gradient with Next.js Image Component

Question

I want to set a background image with the Image component and set a linear-gradient over it. So far, no luck. I've tried simply placing a linear-gradient as the background of the image component. Putting the Image component in a div and putting a linear-gradient on that. And finally the code below.

<div className="hero-image-container">
            <div className="bg-image-filter" />
            <div className="bg-image">
              <Image
                alt="Background"
                className="hero-image"
                layout="fill"
                objectFit="cover"
                src={image}
              />
            </div>
          </div>
<style jsx>{`
        .bg-image {
          z-index: -10;
        }
        .bg-image-filter {
          z-index: 10;
          background: linear-gradient(
            to right bottom,
            rgba(90, 76, 16, 0.6),
            rgba(20, 81, 116, 0.3)
          );
          object-fit: cover;
        }
        .hero {
          min-height: 85vh;
        }
        .hero-image-container {
          height: 85vh;
          width: 100vw;
          position: absolute;
          z-index: 0;
        }
        .hero-image {
          position: relative; !important
        }
      `}</style> 

I can get the linear-gradient to work sans image, of course. The issue might be this breaks the optimization paradigm with the component. Or I might just not know what I'm doing. Any thoughts?

Note: I'm aware of a similar question someone posted, but it has been abandoned unanswered.