Как сделать, что бы блок с position fixed стоял на месте, а не двигался вниз при заполнении контентом страницу

У меня есть react-компонент, в котором есть блок Ему в scss задан position fixed, дабы он оставался на месте, но он двигается при заполнении контентом страницу. Как это решить?

// LeftMenu
import {
  faCalendarDays,
  faChartLine,
  faGear,
  faLocationDot,
  faSquarePollVertical,
  faTableCellsLarge,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";

const LeftMenu = () => {
  return (
    <div className="left-menu">
      <ul>
        {[
          faTableCellsLarge,
          faLocationDot,
          faSquarePollVertical,
          faChartLine,
          faCalendarDays,
          faGear,
        ].map((item) => (
          <li key={item}>
            <FontAwesomeIcon icon={item} />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default LeftMenu;

import { Route, Routes } from "react-router-dom";
import Main from "./container/Main/Main";
import NotFound from "./components/NotFound/NotFound";
import Report from "./components/Report/Report";
import LeftMenu from "./components/LeftMenu/LeftMenu";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="*" element={<NotFound />} />
        <Route path="/report" element={<Report />} />
      </Routes>

      <LeftMenu />
    </div>
  );
}

export default App;

.left-menu {
  margin-top: 12%;
  position: fixed;

  ul {
    display: flex;
    flex-direction: column;

    background: var(--color-blue);
    border-top-right-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);

    padding: 1rem;

    li {
      color: var(--color-white);
      padding: 0.8rem;
      font-size: 1.5rem;
      cursor: pointer;
    }
  }
}