Remove unchecked item from text display & push selected checkboxes into a button element

I've managed to get a text to display when its checked. Whenever its unchecked the text still seems to stay, anyway to remove it? Also, is there anyway to push selected checked boxes into a button element.

const check = document.querySelectorAll('.accordion-content li');
const checkBox = Array.from(check);
const filtersDisplay = document.querySelector('.search-menu .filter-box');

checkBox.forEach(function(list) {
  list.addEventListener('change', function() {
    console.log(list.textContent);
    filtersDisplay.textContent = list.textContent;
  })
})

<div class="search-menu">
    <h2>Search Menu</h2>
      <input class="search-bar"type="search" placeholder="Search..">
        <button class="search-bar-button">Go</button>

        <br>

    <button class="filter-box">Selected filters will display here</button>
        

  </div>

  <!-- Catagories List -->

<br>

    <button class="accordion">Catagories</button>
    <div class="accordion-content">
          <li>
            <label>
                    <input type="checkbox" name="checkbox" />Item 1
            </label>
          </li>    
            
          <li>
            <label>
                <input type="checkbox" name="checkbox" />Item 2
                </label>
         </li>

          <li>
            <label>
                <input type="checkbox" name="checkbox" />Item 3
            </label>
         </li>
    </div>