我有一个组件，每次我改变状态的值时，我希望它在不同颜色之间褪色，而不是直接改变，我怎么做呢？

const Header = (props) => {
    const [headerColor, setHeaderColor] = useState('#c8e9e6');

    useEffect(() => {
        document.addEventListener("scroll", () => {
            console.log(window.scrollY);
            if (window.scrollY < 700) {
                setHeaderColor('#c8e9e6');
               
            } else if (window.scrollY >= 700 && window.scrollY < 1500) {
       
                setHeaderColor('#ffae5a');
            } else if (window.scrollY >= 500) {
                setHeaderColor('#b48fff');
            }
        });
    });
    return (
        <div className={classes.HeaderContainer} style={{
            backgroundColor: headerColor,
        }```);
}