Reactのスクロールアニメーション

Reactでスクロール値を取り、setStateでclassNameを変更してアニメーションさせています。
しかし、このコードだとスクロールをもう一度上に戻し、また下にスクロールするとアニメーションが発火してしまいます。
更新を押さなければアニメーションは一回だけにしたいのですが、何か方法はありますででしょうか？

React
1import React from 'react';
2import './Test.css'
3
4export class Test extends React.Component {
5
6    constructor(props) {
7        super(props);
8        this.myRef = React.createRef();
9        this.state = { count: 0, hight: window.innerHeight, ref: 0, }
10    }
11
12
13    componentDidMount() {
14        this.intervalId = setInterval(() => {
15            this.setState({
16                count: window.pageYOffset
17            })
18        })
19        this.setState({
20            ref: this.myRef.current.offsetTop,
21        })
22    }
23    componentWillUnmount() {
24        clearInterval(this.intervalId);
25    }
26
27
28    color() {
29        if (this.state.count > this.state.ref - this.state.hight) {
30
31            return 'blue'
32
33        }
34        return 'hot'
35    }
36
37
38    render() {
39        return (
40            <>
41                <p>aa</p>
42                <p>aa</p>
43                <p>aa</p>
44                <p>aa</p>
45                <p>aa</p>
46                <p>aa</p>
47                <p>aa</p>
48                <p>aa</p>
49                <p>aa</p>
50                <p>aa</p>
51                <p>aa</p>
52                <p>aa</p>
53                <p>aa</p>
54                <p>aa</p>
55                <p>aa</p>
56                <p>aa</p>
57                <p>aa</p>
58                <p>aa</p>
59                <p>aa</p>
60                <p>aa</p>
61                <p>aa</p>
62                <p>aa</p>
63                <p>aa</p>
64                <p>aa</p>
65                <p>aa</p>
66                <p>aa</p>
67                <p>aa</p>
68                <p>aa</p>
69                <p>aa</p>
70                <p>aa</p>
71                <h3 className={this.color()} ref={this.myRef}>aa</h3>
72                <p>aa</p>
73                <p>aa</p>
74                <p>aa</p>
75                <p>aa</p>
76                <p>aa</p>
77                <p>aa</p>
78                <p>aa</p>
79                <p>aa</p>
80                <p>aa</p>
81                <p>aa</p>
82                <p>aa</p>
83                <p>aa</p>
84                <p>aa</p>
85                <p>aa</p>
86                <p>aa</p>
87                <p>aa</p>
88                <p>aa</p>
89                <p>aa</p>
90                <p>aa</p>
91                <p>aa</p>
92                <p>aa</p>
93                <p>aa</p>
94                <p>aa</p>
95                <p>aa</p>
96                <p>aa</p>
97                <p>aa</p>
98                <p>aa</p>
99                <p>aa</p>
100
101            </>
102        );
103    }
104
105}
106
107export default Test
108

css
1.hot {
2    color: red;
3    transform: translateY(300px);
4
5}
6.blue {
7    color: pink;
8    transform: translateY(0px);
9    transition: 500ms;
10    
11}