Bad performance of React Transition Group only in Firefox

Question

I have been researching it and found no solution.

I'm using the React Transigion Group to create a fade in fade out transition.

Specifically in Firefox there are problems during the animation. The transition is not smooth. In all other browsers, I had no problem (Chrome, Opera, Safari etc).

I also tested on 4 different computers and on all of them I had a performance problem only in Firefox.

Here there are an example of implementation:

<Transition
        in={inProp}
        onEnter={onEnter}
        onExit={onExit}
        timeout={timeout}
        mountOnEnter={mountOnEnter}
        unmountOnExit={unmountOnExit}
        addEndListener={() => true}
        {...rest}
      >
        {(state) => (
          <FadeInAnimation
            ref={ref}
            data-testid="fade-animation"
            state={state}
            {...rest}
          >
            {children}
          </FadeInAnimation>
        )}
</Transition>

In this case, FadeAnimationis just a Styled Component element:

import styled from 'styled-components';
import { TransitionStatus } from 'react-transition-group/Transition';

export const FadeInAnimation = styled.div<{
  state: TransitionStatus;
}>`
  transition: 0.3s;
  opacity: ${({ state }) => (state === 'entered' ? 1 : 0)};
  visibility: ${({ state }) => (state === 'entered' ? 'block' : 'hidden')};
`;

Any ideas on how to fix this performance problem in Firefox?

Thank you.