Vue 3 transition is activating on multiple elements when it should apply to only one

Question

I have a web page with two different elements that have a transition. One is a panel that slides up from the bottom of the screen, and another slides in from the right. They each have their own button that triggers the transition. The bottom one works normally whenever I click its button. But when I click the one that comes in from the right, it activates both its own and the other element's transition animation.

//the right side element
        <transition name="slide-toggle">
          <div class="sidebar" v-show="sidebarOpen">
            <div
              class="collapse-button collapse-button-mobile"
              @click="toggleSidebar()"
              v-if="sidebarOpen && type == 'mobile'"
            >
              <img src="@/assets/icons/AngleBracketRight.svg" />
              <div class="collapse-text">collapse</div>
            </div>
            <side-panel
              :stream-job="streamJob"
              @select-job="setJob"
            ></side-panel>
          </div>
        </transition>

//the bottom element
    <transition name="slide-toggle">
      <div v-if="notesOpen" class="notes-modal-container">
        <notes-modal
          v-model="noteRef"
          @close="notesOpen = false"
          @change="setNotes"
          @delete-note="deleteNotes"
          mode="dark"
        ></notes-modal>
      </div>
    </transition>

//css for the bottom transition
.notes-modal-container.slide-toggle-enter-active,
.notes-modal-container.slide-toggle-leave-active {
  transition: 1s;
}

.notes-modal-container.slide-toggle-enter-to,
.notes-modal-container.slide-toggle-leave-from {
  bottom: 8px;
}
.notes-modal-container.slide-toggle-leave-to,
.notes-modal-container.slide-toggle-enter-from {
  bottom: -310px;
}

//css for the right side transition
.sidebar.slide-toggle-enter-active,
.sidebar.slide-toggle-leave-active {
  transition: 1s ease-in-out;
}

.sidebar.slide-toggle-enter-to,
.sidebar.slide-toggle-leave-from {
  right: 0;
}

.sidebar.slide-toggle-leave-to,
.sidebar.slide-toggle-enter-from {
  right: -400px;
}