Preserve inner shadow in container

I am working on a react project with Tailwind CSS where I have a div (with inner shadow) block acting a as a container to a scroll-able page. The page has elements that stick to the top upon scroll. This affects the inner shadow of the container. I can’t really change the position of the sticky elements as I want the scroll-able elements slowly fade away. I have pasted the snippets below. Thanks in advance.

Container div block:
<div className="mb-10 h-11/12 w-11/12 rounded-lg bg-white border shadow-inner-dark overflow-y-scroll">

Sticky block:

      <div className="sticky top-0 mb-6 h-40 w-full flex flex-col items-center">
        <div className="bg-white min-w-full text-center">
          <h1 className="text-4xl text-black font-silkscreen">Agent Hub </h1>
        </div>
        <div className="w-full grid place-items-center backdrop-blur-xl">
          <div className="w-full grid place-items-center  bg-gradient-to-t from-transparent to-white">
            <input
              type="text"
              className="mt-10 w-1/4 pl-6 py-2 rounded-full bg-black opacity-80 hover:shadow-2xl-dark text-white placeholder-gray-500 focus:outline-none transition duration:700"
              placeholder="Search..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
      </div>

I tried meddling with the z-index but it wasn’t of much use.