Botão adicionar transação não funciona

O botão para adicionar transação não funciona. Quando eu clico nele, nada acontece.

Segue o código da aula

const transacoes = [
  {
    id: 1,
    nome: "Compra de supermercado",
    valor: 150,
    tipo: "despesa",
    categoria: "Alimentação",
    data: "2024-10-10",
  },
  {
    id: 2,
    nome: "Pagamento de aluguel",
    valor: 1000,
    tipo: "despesa",
    categoria: "Moradia",
    data: "2024-10-05",
  },
  {
    id: 3,
    nome: "Recebimento de salário",
    valor: 3000,
    tipo: "receita",
    categoria: "Renda",
    data: "2024-10-01",
  },
];

const Transacoes = () => {
  const modalRef = useRef<ModalHandle>(null)

  const [novaTransacao, setNovaTransacao] = useState({
    nome: "",
    valor: 0,
    tipo: "",
    categoria: "",
    data: "",
  });

  return (
    <Cartao>
      <CartaoCabecalho>Movimentação financeira</CartaoCabecalho>
      <Container>
        <ListaMovimentacoes>
          {transacoes.map((transacao) => (
            <Transacao
              key={transacao.id}
              tipo={transacao.tipo}
              nome={transacao.nome}
              valor={transacao.valor}
              data={transacao.data}
            />
          ))}
        </ListaMovimentacoes>
        <Botao $variante="neutro" onClick={() => modalRef.current?.open}>
          <MoneyIcon />
          Adicionar transação
        </Botao>
          <Modal
            ref={modalRef}
            cliqueForaModal
            titulo="Adicionar transação"
            icon={<MoneyIcon />}
            aoClicar={() => alert("modal aberta")}
          >
            <Form>
              <Fieldset>
                <Label htmlFor="nomeTransacao">Nome da transação</Label>
                <CampoTexto
                  type="text"
                  id="nomeTransacao"
                  placeholder="Ex: Compra na padaria"
                  value={novaTransacao.nome}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                    setNovaTransacao({ ...novaTransacao, nome: e.target.value })
                  }
                />
              </Fieldset>
              <Fieldset>
                <Label htmlFor="valor">Valor</Label>
                <CampoTexto
                  type="number"
                  id="valor"
                  placeholder="10"
                  value={novaTransacao.valor}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                    setNovaTransacao({
                      ...novaTransacao,
                      valor: parseFloat(e.target.value),
                    })
                  }
                />
              </Fieldset>
              <Fieldset>
                <Label htmlFor="tipo">Tipo</Label>
                <SelectGroup
                  id="tipo"
                  value={novaTransacao.tipo}
                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                    setNovaTransacao({
                      ...novaTransacao,
                      tipo: e.target.value,
                    })
                  }
                >
                  <SelectOption value="">Selecione o tipo</SelectOption>
                  <SelectOption value="receita">Receita</SelectOption>
                  <SelectOption value="despesa">Despesa</SelectOption>
                </SelectGroup>
              </Fieldset>
              <Fieldset>
                <Label htmlFor="valor">Data</Label>
                <CampoTexto
                  type="date"
                  id="valor"
                  placeholder="dd/mm/aaaa"
                  value={novaTransacao.data}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                    setNovaTransacao({
                      ...novaTransacao,
                      data: e.target.value,
                    })
                  }
                />
              </Fieldset>
              <Fieldset>
                <Label htmlFor="categoria">Categoria</Label>
                <CampoTexto
                  type="text"
                  id="categoria"
                  placeholder="Alimentação"
                  value={novaTransacao.categoria}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                    setNovaTransacao({
                      ...novaTransacao,
                      categoria: e.target.value,
                    })
                  }
                />
              </Fieldset>
            </Form>
          </Modal>
      </Container>
    </Cartao>
  );
};
export default Transacoes;