[Dúvida] Desafio Modal

Fiz o desafio do modal e encontrei alguns problemas. Quando eu fechava o modal, não fechava o Overlay. Então criei um useState para controlar isso e passei junto na condicional, o componente renderiza se houver uma foto e o modal estiver aberto. Assim, quando eu abri uma foto, ele abria a foto e o overlay corretamente e quando eu fecho pelo botão, ele fecha os dois. Porém, encontrei um problema. Assim, que eu eu abro uma foto e fecho ela, não conseguia abrir outra imagem, somente se recarregasse a página. Por isso, envolvi o meu useState em um useEffects para monitorar a mudança na prop 'foto'. Quando a prop 'foto' muda, o estado 'modalAberto' é atualizado para 'true', e assim eu consegui abrir as demais imagens, quando fecho. Será que fiz certo? kkkk se alguem puder me informar, agradeço desde já a ajuda!

import styled from "styled-components";
import Imagem from "../Galeria/Imagem/Imagem";
import close from "../../assets/close.png";
import { useEffect, useState } from "react";

const Overlay = styled.div`
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
`;

const DialogEstilizado = styled.dialog`
  position: absolute;
  top: 294px;
  width: 1156px;
  height: 660.57px;
  background-color: transparent;
  border: none;
`;

const ButtonClosed = styled.button`
  position: absolute;
  margin-top: -790px;
  margin-left: 990px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
`;

const FormStyled = styled.form`
  
`

const ModalZoom = ({ foto }) => {
  const [modalAberto, setModalAberto] = useState(false);

  useEffect(() => { 
    if (foto ) {
      setModalAberto(true)
    }
  }, [foto]);

  const fecharModal = () => {
    setModalAberto(false)
  }
  

  return (
    <>
      {foto && modalAberto && (
        <>
          <Overlay onClick={fecharModal} />
          <DialogEstilizado open={modalAberto}>
            <Imagem foto={foto} expandida={modalAberto} />
            <FormStyled method="dialog">
              <ButtonClosed onClick={fecharModal}>
                <img src={close} alt="fechar" />
              </ButtonClosed>
            </FormStyled>
          </DialogEstilizado>
        </>
      )}
    </>
  );
};

export default ModalZoom;