How can I limit the number of options that show in my drop down menu? – Jquery

const optionMenu = document.querySelector(".select-menu"),
  selectBtn = optionMenu.querySelector(".select-btn"),
  options = optionMenu.querySelectorAll(".option"),
  sBtn_text = optionMenu.querySelector(".sBtn-text");

selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));

options.forEach(option => {
  option.addEventListener("click", () => {
    let selectedOption = option.querySelector(".option-text").innerText;
    sBtn_text.innerText = selectedOption;

    optionMenu.classList.remove("active");
  });
});

.select-menu .options {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  display: none;
  cursor: pointer;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 200px;
}

.select-menu.active .options {
  display: block;
}

.options .option {
  display: flex;
  height: 55px;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 8px;
  align-items: center;
  background: #fff;

}

.options .option:hover {
  background: #F2F2F2;
}

.option i {
  font-size: 25px;
  margin-right: 12px;
}

.option .option-text {
  font-size: 18px;
  color: #333;
}

<div class="select-menu">
  <div class="select-btn">
    <span class="sBtn-text">Select Shade</span>
    <i class="bx bx-chevron-down"></i>
  </div>

  <ul class="options">
    <li class="option">
      <i class="bx bxs-circle" style="color: #a87a4c;"></i>
      <span class="option-text">Deep 1</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #a67d53;"></i>
      <span class="option-text">Deep 2</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #7d5538;"></i>
      <span class="option-text">Deep 3</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #895e3b;"></i>
      <span class="option-text">Deep 4</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #d9c09f;"></i>
      <span class="option-text">Light 1</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #cea480;"></i>
      <span class="option-text">Light 2</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #d4af8d;"></i>
      <span class="option-text">Light 3</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #c29776;"></i>
      <span class="option-text">Light 4</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #c79b6d;"></i>
      <span class="option-text">Medium 1</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #c7a570;"></i>
      <span class="option-text">Medium 2</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #956946;"></i>
      <span class="option-text">Medium 3</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #a17b51;"></i>
      <span class="option-text">Medium 4</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #714b35;"></i>
      <span class="option-text">Rich 1</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #614633;"></i>
      <span class="option-text">Rich 2</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #4f3a2c;"></i>
      <span class="option-text">Rich 3</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #564439;"></i>
      <span class="option-text">Rich 4</span>
    </li>
  </ul>
  <script src="main.js"></script>

</div>