ハンバーガーメニューについて

実現したいこと

レスポンシブ対応した際にハンバーガーメニューが実装できるようにしたい。

前提

iPhoneサイズの時にハンバーガーメニューを実装しようとした時に動きません。

発生している問題・エラーメッセージ

エラーメッセージ
Uncaught TypeError: Cannot read properties of undefined (reading 'show')
    at HTMLAnchorElement.<anonymous> (main.js:8:23)
(anonymous) @ main.js:8

該当のソースコード

ソースコード

-------------------javascript-------------------

'use strict';

{
  const open = document.getElementById('open')
  const overlay = document.querySelectorAll('.overlay')

  open.addEventListener('click', () => {
    overlay.classList.add('show')　←.add('show')この部分がエラーと出ます。
  })
}

-------------------html-------------------

<header>
    <h1>ああああああああ</h1>
    <h2>sitemap</h2>
    <ul>
      <li><a href=""><i class="bi bi-facebook"></i></a></li>
      <li><a href=""><i class="bi bi-instagram"></i></a></li>
      <li><a href=""><i class="bi bi-twitter"></i></a></li>
    </ul>
    <a href=""><i class="bi bi-telephone"></i></a>
    <p>041-888-999</p>
    <a href="#" class="menu-btn" id="open"><i class="bi bi-list"></i></a>
  </header>

<div class="overlay">
    <ul>
      <li><a href="inidex.html">TOP</a></li>
      <li><a href="our.html">私たちのこだわり</a></li>
      <li><a href="food.html">フード・コース</a></li>
      <li><a href="drink.html">ドリンクメニュー</a></li>
      <li><a href="com.html">姉妹店・会社</a></li>
    </ul>
    <a href="#" class="menu-btn" id="close"><i class="bi bi-x-lg"></i></a>
  </div>

-------------------css-------------------

.overlay {
  display: none;
}

@media screen and (max-width: 700px) {
.overlay {
    display: flex;
    width: 40%;
    background-color: rgba(0,0,0,0.9);
    color: white;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
  }

  .overlay.show {
    opacity: 1;
    pointer-events: auto;
  }
}

試したこと

クラスをつけるのではなく外しように実装してみたりなどしました。

補足情報（FW/ツールのバージョンなど）

メインはpcサイズで書いており、スマホサイズ時にメディアクエリでハンバーガーメニューを実装しようとしています。
javascriptのコードはドットインストールのレッスンで学んだものを参考にしています。
ご教授いただけますと幸いです。
また質問の仕方がおかしかったり改善点などもあればご教授いただけますと幸いです。