Position fixed is not working inside container?

Question

I am working on my react-app in which I am creating a horizontal scroll website (for which I have rotated my container). I want to create a static navbar inside my div and on the other hand, when I place my navbar inside any other component its working. How can I achieve this? Please kindly help me. Here is my code:

    <>
      <div
        className="outer-wrapper"
        id="outer-wrapper"
        ref={outerWrapper}
        onScroll={onScrollFunction}
      >
        {/* <Header /> */}
        <div className="wrapper">
          <div className="navmenu">
            <h1>Logo</h1>
            <button>Menu</button>
          </div>
          <HomePage />
          <AnimationMain
            tags="<h1><span>Animation</span> that Works like magic.</h1>"
            data={pageDataArr[0]}
            anim={animationPageAnim}
            videoData={videoData}
            servicesInfo={servicesInfoAnimation}
            label={labelArr[0]}
          />
          <AnimationMain
            tags="<h1><span>Design</span> is intelligence made visible.</h1>"
            data={pageDataArr[1]}
            anim={animationPageAnim}
            label={labelArr[1]}
          />
          <AnimationMain
            data={pageDataArr[2]}
            anim={animationPageAnim}
            label={labelArr[2]}
          />
          <AnimationMain
            tags="<h1>Making <span>Website</span> that capture Users.</h1>"
            data={pageDataArr[3]}
            anim={WebDevPageAnim}
            label={labelArr[3]}
            videoData={imageData}
            servicesInfo={servicesInfoWebDev}
          />
          <AnimationMain
            data={pageDataArr[4]}
            anim={animationPageAnim}
            label={labelArr[4]}
          />
        </div>
      </div>
    </>```

.outer-wrapper {
  width: 100vh !important;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid blue;
  // margin-top: -4rem;
  .wrapper {
    display: flex;
    flex-direction: row;
    width: 600vw;
    height: 100vh;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    border: 2px solid yellow;
    .navmenu {
      border: 1px solid red;
      color: red;
      position: fixed !important;
      top: 0;
      left: 0;
    }
  }
}

Kindly help me, I am stuck here all day.