[Dúvida] Display Flex na Dialog | React: utilizando hooks para gerenciar estados

Estive fazendo alguns ajustes no meu código para melhorar a legibilidade e também tentei estilizar a modal por conta própria, mas aí percebi um erro: Minha modal nunca saía da tela. Eu conseguia abrir e fechar normalmente (o fundo aparecia e desaparecia) mas a modal nunca saía da tela.

Depois de bater muito a cabeça, revisar a lógica do meu código e pesquisar, vi que o problema estava no display: flex que apliquei ao componente da modal.

Estive pensando: Será que o padrão do metodo close() sería aplicar um display: none à modal, mas acabou respeitando minha decisão de usar o display: flex?

Ou será que ele aplicou o display: none, mas o componente foi renderizado e pegou novamente a informação do display: flex no css depois de fechar e por isso ficou visível?

Uma solução que encontrei foi utilizar o display: flex apenas quando a modal estiver aberta usando o seletor de atributo ficando assim:

.dialog[open]{
display: flex;
...
}

Olá Alexander.
Tudo bem?
Parabéns por ter investigado o problema tão a fundo .
Vamos entender o que está acontecendo por baixo dos panos com o <dialog> e o display: flex.
Contexto: o comportamento padrão do <dialog>
O elemento <dialog> tem um comportamento nativo controlado pelo navegador quando você usa os métodos .show() e .close() (ou o atributo open).

Quando você chama dialog.show() ou adiciona o atributo open, o navegador mostra o diálogo.
Quando você chama dialog.close() ou remove o atributo open, o navegador esconde o diálogo — normalmente aplicando internamente um display: none.
Ou seja:

<dialog></dialog> <!-- não visível -->
<dialog open></dialog> <!-- visível -->

O próprio HTML cuida disso — você não precisa alterar o display manualmente.
O que aconteceu no seu caso:
Quando você aplicou no CSS algo assim:

dialog {
  display: flex;
  /* ...outros estilos */
}

Você sobrescreveu o comportamento padrão do navegador.
Então, quando o método .close() foi chamado, o navegador tentou aplicar display: none internamente mas o seu CSS tinha prioridade.
Resultado: o dialog continuava com display: flex, e portanto continuava visível.
É por isso que:

o fundo (backdrop) sumia corretamente (controlado pelo open),
mas o conteúdo da modal permanecia na tela.
Por que sua solução funcionou
Sua solução com o seletor de atributo foi perfeita:

dialog[open] {
  display: flex;
  /* ...seus estilos */
}

Esse CSS diz:

“Somente quando o diálogo tiver o atributo open, ele deve ser display: flex.”
Assim, quando você chama .close(), o atributo open é removido.
E o navegador deixa de aplicar seu display: flex, voltando a esconder o diálogo.

Ou seja, agora o comportamento nativo e o seu CSS estão em harmonia.
Boas práticas para estilizar <dialog>

Nunca aplique display diretamente no dialog sem condicionar ao [open].
Use sempre:
```
dialog[open] {
  display: flex; /* ou block, grid... */
}
```
Use o pseudo-elemento ::backdrop para estilizar o fundo escurecido:
```
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
```
Evite esconder o diálogo via CSS (como visibility: hidden ou opacity: 0),
porque o estado de “aberto” ou “fechado” deve sempre refletir o atributo open.

Espero ter sanado suas duvidas.
Qualquer coisa pergunte ai.
Bons estudos.