我有这个奇怪的行为，当我向下滚动黄色框到蓝色框的顶部，我已经设置了位置粘到黄色框和蓝色框，所以当我向下滚动这两个应该留在那里，不应该去另一个顶部。当我向下滚动蓝色和黄色框应该留在，但只有橙子框应该是可滚动的，任何帮助？

要尝试的代码：
https://codesandbox.io/s/example-react-hooks-usestate-forked-69suro?file=/src/index.js
代码：

import React from "react";
import ReactDOM from "react-dom";
import "./app.css";

function App() {
  return (
    <div className="box-container">
      <div className="box"></div>
      <div className="both">
        <div className="left__side"></div>
        <div className="right__side">
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
          <div className="oikea__box"></div>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.box {
  height: 100px;
  border: 1px solid black;
  width: 100%;
  background-color: blue;
  position: sticky;
  top: 0;
}

.both {
  display: flex;
}

.left__side {
  height: 200px;
  border: 1px solid black;
  width: 100px;
  background-color: yellow;
  position: sticky;
  top: 0;
}

.right__side {
  border: 1px solid black;
  width: 100%;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.oikea__box {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  background-color: orange;
}