как использовать радительский scrollbar для дочернего элемента

const items = new Array(100).fill("").map((_, i) => (
  <div
    key={i}
    style={{
      height: 50,
      margin: 20,
      backgroundColor: "red",
    }}
  >
    {i}
  </div>
));

function App() {
  return (
    <div className="app">
      <header className="header"></header>
      <main className="main">{items}</main>
      <footer className="footer"></footer>
    </div>
  );
}



ReactDOM.render( <
  App / > ,
  document.getElementById('root')
);

body {
  overflow-y: scroll;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 100px;
  background-color: gray;
}

.main {
  min-height: 500px;
  height: calc(100vh - 200px);
  overflow-y: scroll;
  /* Нужно, что бы scrollbar который на body управлял или заменил scrollbar на main */
  /* то есть сейчас два а надо что бы остался только у body и скроллил main */
}

.footer {
  height: 100px;
  background-color: gray;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>