Dúvida relacionada a tag <dialog>

Quando ela vai colocar a tag dialog, ela escolhe a div mais externa ao conteúdo interativo, sendo aquela que possui class="modal-content". Tentei colocar essa tag na div que possuía class="modal-dialog", porque pra mim faz mais sentido assim. Mas fazendo isso, o modal bugou. Não entendo porque isso aconteceu, algum poderia me explicar?

<div class="modal fade" id="contatoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <dialog class="modal-dialog">  <!-- COLOCANDO AQUI DA ERRO -->
    <div class="modal-content"> 
      <header class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Entre em contato</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </header>
      <main class="modal-body">
        <div class="form-floating mb-3">
          <input type="text" class="form-control" id="floatingInputName" placeholder=" Insira seu nome completo">
          <label for="floatingInputName">Nome completo</label>
        </div>
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInputEmail" placeholder="nome@exemplo.com">
          <label for="floatingInputEmail">Endereço de e-mail</label>
        </div>
        <div class="form-floating">
          <textarea class="form-control" placeholder="Deixe seu comentário aqui" id="floatingTextarea2" style="height: 100px"></textarea>
          <label for="floatingTextarea2">Deixe seu comentário</label>
        </div>
      </main>
      <footer class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
        <button type="button" class="btn botao-cor-especial">Enviar</button>
      </footer>
    </div>
  </dialog>
</div>

Código completo aqui: https://drive.google.com/file/d/1mEs_9X4lCdFK3taWJOTt1YY4VKWlWqQh/view?usp=sharing