The CSSTransition component does not take effect when the transition effect is written with sass

[VitaminCtea]

When I used sass to write the animation style for the CSSTrantion component, it didn't work! However, it is possible to import CSS files.
The TSX code is as follows:

import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import transitions from './transition.module.sass'

export default function TransitionDemo() {
    const [ show, setShow ] = useState(false)
    return (
        <div>
            <CSSTransition in={ show } timeout={ 200 } classNames={{ ...transitions }}>
                <div>
                    Hello, Transition!
                </div>
            </CSSTransition>
            <button
                    type={ 'button' }
                    onClick={ () => setShow((show: boolean) => !show) }
            >
                Click to Enter
            </button>
        </div>
    )
}

The sass file code is as follows:

.demo-enter
    opacity: 0
    &-active
      opacity: 1
.demo-enter-active, .demo-exit-active
    transition: opacity 200ms
.demo-exit
    opacity: 1
    &-active
      opacity: 0

The call location is in the App root component in the app.tsx file:
<TransitionDemo />
How to solve the reason that the CSSTransition component does not work when the animation is written with sass?

[taion]

This looks like an issue with your build pipeline. Make sure that the exported keys in the styling module match the keys expected for classNames. You can try logging it out.