Estou tentando fazer uma transição ao adicionar a classe ativo com css puro, só que não esta dando certo. o box abre de uma vez só sem fazer a transição da opacidade. Isso seria um problema do react? Ou é posivel fazer a transição apenas com css? Segue o código.

import styles from "./Ordenador.module.scss";
import opcoes from "./opcoes.json";
import { useState } from "react";
import classNames from "classnames";

function Ordenador() {
  const [aberto, setAberto] = useState(false);
  const [ativo, setAtivo] = useState("");

  return (
    <button
      className={styles.ordenador}
      onClick={() => {
        console.log(aberto);
        setAberto(!aberto);
      }}
    >
      <span>Ordenar por:</span>
      <div
        className={classNames({
          [styles.ordenador__options]: true,
          [styles["ordenador__options--ativo"]]: aberto,
        })}
      >
        {opcoes.map((opcao) => (
          <div
            key={opcao.value}
            className={classNames({
              [styles.ordenador__option]: true,
              [styles["ordenador__option--ativo"]]: ativo === opcao.value,
            })}
            onClick={() => setAtivo(opcao.value)}
          >
            {opcao.nome}
          </div>
        ))}
      </div>
    </button>
  );
}

export default Ordenador;

@import "styles/variaveis";

.ordenador {
  align-items: center;
  background-color: $grey;
  border: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  font-size: 1rem;
  font-weight: bold;
  height: 40px;
  justify-content: space-between;
  min-width: 240px;
  padding: 0 40px;
  position: relative;
  &--ativo {
    background-color: $blue;
    color: white;
  }

  &__options {
    display: none;
    position: absolute;
    left: 0;
    flex-direction: column;
    top: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 1s;
    /* &--ativo {
      display: flex;
    } */

    &.ordenador__options--ativo {
      display: flex;
      opacity: 1;
    }
  }

  &__option {
    align-items: center;
    background-color: $grey;
    border-top: 2px solid $light-grey;
    box-sizing: border-box;
    color: $black;
    display: flex;
    height: 40px;
    justify-content: center;
    width: inherit;
    &:hover,
    &--ativo {
      background-color: $blue;
      cursor: pointer;
      color: white;
    }
  }
}