react_devtools_backend.js:2557 Error: reCAPTCHA placeholder element must be an element or id

上記のエラーの原因がわからず教えていただきたいです

import firebase from 'firebase/app'
import { useState, useEffect } from 'react'
import { AtomButton } from 'src/components/Atoms/AtomButton'
import { AtomInput } from 'src/components/Atoms/AtomInput'
import { sendSmsVerification, confirmVerification } from 'src/lib/firebase'

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function SmsPage() {
  const [phoneNumber, setPhoneNumber] = useState('')
  const [verificationCode, setVerificationCode] = useState('')
  const [confirmationResult, setConfirmationResult] = useState(null)
  const [count, setCount] = useState(0)

  useEffect(() => {
    window.appVerifier = new firebase.auth.RecaptchaVerifier(
      'recaptcha-container',
      {
        size: 'invisible',
      },
    )
  }, [])

  const sendSms = async () => {
    if (phoneNumber === '') {
      return alert('電話番号を入力してください')
    }

    const result = await sendSmsVerification(phoneNumber, window.appVerifier)
    setConfirmationResult(result)
    setCount(1)
  }

  const sendVerification = () => {
    if (verificationCode.length == 6) {
      confirmVerification(confirmationResult, verificationCode)
    } else {
      alert('６桁の数字を入れてください')
    }
  }

  return (
    <div>
      <main>
        電話番号認証
        {count === 0 ? (
          <>
            <p>電話番号を入力してください</p>
            <div>{phoneNumber}</div>
            <AtomInput
              value={phoneNumber}
              onChange={setPhoneNumber}
              placeholder="電話番号"
            />
            <AtomButton
              text="コードを送信"
              clickEvent={sendSms}
              id="recaptcha-container"
            />
            <AtomButton href="/" text="トップに" />
          </>
        ) : (
          <>
            <p>
              入力した番号に届いた
              <br />
              ６桁の番号を入力してください
            </p>
            <div>{verificationCode}</div>
            <AtomInput
              value={verificationCode}
              onChange={setVerificationCode}
              placeholder="コード"
            />
            <AtomButton
              text="ユーザー情報登録画面に"
              clickEvent={sendVerification}
            />
            <AtomButton
              text="コードを再送する"
              clickEvent={() => setCount(0)}
            />
          </>
        )}
      </main>
    </div>
  )
}