react-transition-group adding new classes instead of adding suffix

[tanpld]

I'm not sure this is an issue, but when I try to code along with the tutorial on youtube. I ran into this problem.
Classes added to my element look like this: "menu-primary enter enter-active" instead of "menu-primary-enter-active".
So I have to change my css to this in order to make it works:

.menu-primary.enter {
  position: absolute;
  transform: translateX(-110%);
}

.menu-primary.enter.enter-active {
  transform: translateX(0%);
  transition: all var(--speed) ease;
}

.menu-primary.exit {
  position: absolute;
}

.menu-primary.exit.exit-active {
  transform: translateX(-110%);
  transition: all var(--speed) ease;
}

.menu-secondary.enter {
  transform: translateX(110%);
}

.menu-secondary.enter.enter-active {
  transform: translateX(0%);
  transition: all var(--speed) ease;
}

.menu-secondary.exit.exit-active {
  transform: translateX(110%);
  transition: all var(--speed) ease;
}

I have checked the version of react-transition-group and it is the same with this repo (4.3.0). Can anyone explain why this happened? Thank you