Solucionado
Porque a linha
aoFotoSelecionada={foto => setFotoSelecionada(foto)}
não pode ser chamada simplesmente como :
aoFotoSelecionada={setFotoSelecionada(foto)}
E a mesma dúvida para a linha
{!expandida && <BotaoIcone aria-hidden={expandida} onClick={() => aoZoomSolicitado(foto)}>
não poderia ser:
{!expandida && <BotaoIcone aria-hidden={expandida} onClick={aoZoomSolicitado(foto)}>
Salve, Diego!
Essas funções são chamadas de funções de callback. Elas são passadas como argumentos para outras funções e são chamadas em algum momento durante a execução daquela função. Nesse caso, elas estão sendo usadas como manipuladores de eventos.
Vamos ao primeiro exemplo:
aoFotoSelecionada={foto => setFotoSelecionada(foto)}
Aqui, você está passando uma função anônima que recebe um parâmetro 'foto' e chama a função 'setFotoSelecionada' com esse parâmetro. Essa função anônima será chamada quando o evento ao qual está associada for disparado (neste caso, quando uma foto for selecionada), e a foto selecionada será passada como argumento.
Se você tentasse fazer isso:
aoFotoSelecionada={setFotoSelecionada(foto)}
O JavaScript tentaria executar a função 'setFotoSelecionada' imediatamente (e 'foto' não estaria definido neste contexto), em vez de passá-la como uma função de callback para ser executada mais tarde.
O mesmo vale para o segundo exemplo. Você precisa passar uma função que será chamada quando o evento 'onClick' for disparado, e não o resultado da chamada da função 'aoZoomSolicitado'.
Espero ter ajudado e bons estudos!