Is there any way to show the buttons in a div during mouseover a div, and hide the buttons in a div during mouseout a div?

const a = document.getElementById("a");
let btns = document.getElementsByTagName("#firstItem > .a > button");
let btnsA = Array.from(btns);

a.addEventListener('mouseover', () => {

  btnsA.forEach((element) => {
    element.style["display"] = "flex";
  });
  
  a.style["color"] = "#56F1FF";
});

a.addEventListener('mouseout', () => {

  btnsA.forEach((element) => {
    element.style["display"] = "none";
  });
  
  a.style["color"] = "#FFFFFF";
});

* {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

section {
  display: flex;
}

#firstItem {
  width: 10%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}

#frame {
  width: 90%;
  height: 100%;
}

section #firstItem div {
  color: #FFFFFF;
  background-color: #000000;
  border: 0;
  text-align: center;
}

section #firstItem div:hover {
  color: #000000;
  background-color: #56F1FF;
}

section #firstItem #a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

section #firstItem #a button {
  display: none;
  background-color: #56F1FF;
  color: #000000;
}

<section>
  <div id="firstItem">
    <div id="a">a
      <button>a1</button>
      <button>a2</button>
      <button>a3</button>
      <button>a4</button>
      <button>a5</button>
      <button>a6</button>
    </div>
    <div class="b">b</div>
    <div class="b">c</div>
    <div class="b">d</div>
    <div class="b">e</div>
    <div class="b">f</div>
    <div class="b">g</div>
    <div class="b">h</div>
  </div>
  <div id="frame">
  </div>
</section>