Imagem não fecha.

Boa tarde,

ao clicar para fechar a imagem ampliada, ela não se fecha, eu preciso atualizar a página para fechar.

index.jsx/Imagem

const Imagem = ({ foto, expandida = false, aoZoomSolicitado, aoAlternarFavorito }) => {
    return(
        <Figure $expandida={expandida} id={`foto-${foto.id}`}>
            <img src={foto.path} alt={foto.alt} />
            <figcaption>
                <h3> {foto.titulo}</h3>
                <Rodape>
                    <h4>{foto.fonte}</h4>
                    <BotaoIcone onClick={() => aoAlternarFavorito(foto)}>
                        <img src="/icones/favorito.png" alt="Icone de favorito"/>
                    </BotaoIcone>
                     {!expandida && <BotaoIcone aria-hidden={expandida} onClick={() => aoZoomSolicitado(foto)}>
                        <img src="/icones/expandir.png" alt="Icone de expandi"/>
                    </BotaoIcone>}
                </Rodape>
            </figcaption>
        </Figure>)
}

index.jsx/Galeria

const Galeria = ({ fotos = [], aoFotoSelecionada, aoAlternarFavorito }) => {
    return(
       <>
            <Tags />
            <GaleriaContainer>
                <SecaoFluida>
                    <Titulo>Navegue pela galeria</Titulo>
                    <ImagemContainer>
                        {fotos.map(( foto => <Imagem
                            aoZoomSolicitado={aoFotoSelecionada}
                            aoAlternarFavorito={aoAlternarFavorito}
                            key={foto.id} 
                            foto={foto} />)
                        )}
                    </ImagemContainer>
                </SecaoFluida>
                 <Populares />
            </GaleriaContainer>
       </>
    )
}

index.jsx/ModalZoom

import BotaoIcone from '../BotaoIcone';

const ModalZoom = ({ foto, aoFechar}) => {
    return(
        <>
            {foto && <>
                <Overlay />
                <DialogEstilizado open={!!foto} onClose={aoFechar}>
                <Imagem foto={foto} expandida={true}/>
                <form method="dialog">
                    <BotaoIcone formMethod="dialog">
                        <img src="/icones/fechar.png" alt="Icone de fechar"/>
                    </BotaoIcone>
                </form>
            </DialogEstilizado>
            </>}
        </>
    )
}

app.jsx

 return (
      <FundoGradiente>
        <EstilosGlobais />
        <AppContainer>   
          <Cabecalho />
          <MainContainer>
            <BarraLateral />
            <ConteudoGaleria>
              <Banner 
                texto={"A galeria mais completa de fotos do espaço!"}
                backgroundImage={bannerBackground}
              />
              <Galeria 
                aoFotoSelecionada={foto => setFotoSelecionada(foto)} 
                aoAlternarFavorito={aoAlternarFavorito}
                fotos={fotosDaGaleria}
              />
            </ConteudoGaleria>
          </MainContainer>
        </AppContainer>
        <ModalZoom 
          foto={fotoSelecionada}
          aoFechar={() => setFotoSelecionada(null)}
          />
      </FundoGradiente>
  )
}