样式的组件过渡动画不起作用

Question

如何使用过渡进行按钮更改样式？现在，Reactjs重新启动组件，并且没有显示任何动画按钮，

<S.Button onClick={() => setActive(!isActive)} isActive={isActive}>
            {/* {isActive ? 'Daily stats' : 'All time stats'} */}
            asd
        </S.Button>

export const Button = styled.button<{ isActive: boolean }>`
    font-family: ${({ theme }) => theme.font.family.book};
    background-color: ${({ isActive, theme }) =>
        isActive ? '#cae8ee' : theme.color.white};
    border: 1px solid
        ${({ isActive, theme }) => (isActive ? theme.color.primary : '#f0f0f0')};
    transition: all 0.3s ease-in-out;

    &::before {
        content: '';
        background-color: ${({ isActive, theme }) =>
            isActive ? theme.color.primary : '#f0f0f0'};
        left: ${({ isActive }) => (isActive ? '150px' : '2px')};
        transition: all 0.3s ease-in-out;
    }
`;

我发现该问题是在按钮上获取数据的使用效率挂钩。因此，它在不显示任何动画的情况下重新注册该按钮。

    useEffect(() => {
        if (statsButtonActive) {
            fetchDailyData();
        } else {
            fetchAllTimeData();
        }
        // eslint-disable-next-line
    }, [statsButtonActive]);

是否有任何解决方案可以停止恢复按钮？