React.jsにてスライダーをスムーズに動かしたい

前提

家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。

実現したいこと

ライトの明るさを変更できるスライダー（LightSliderBar.js）があるのですが
スライダーを動かした時、なぜかスライダーがほとんど固まってしまい動かせないのを
スムーズに動かせるようにしたい。

発生している問題・エラーメッセージ

スライダーを動かした時、なぜかスライダーがほとんど固まってしまい動かせない。

該当のソースコード

DiscoverOffice.js
1const DiscoverOffice = () => {
2    
3    const [light, setLight] = useState([]);
4    
5    const getDevices = async(data) => {
6      await axios.get('xxx.com',
7        {
8          headers: {
9            'Content-Type': 'application/json',
10            'Authorization': `Bearer ${cookies.get('accesstoken')}`
11          },
12        })
13        .then(result => {
14          setLight(result.data.attributes.light);  
15        })
16        .catch(err => {
17          console.log(err);
18        });
19    }
20
21return (
22    
23            {light.map((item,i) => 
24            
25            <LightSliderBarDiscoverOffice item={item}/>
26            
27            )}
28    
29      );
30}
31export default DiscoverOffice;

LightSliderBar.js
1
2const LightSliderBar = ({ item }) => {
3    
4    const cookies = new Cookies();
5    const entity_id = item.entity_id;
6    const [light, setLight] = useState([]);
7    const [brightness_value, setBrightnessValue] = useState(item.brightness);
8    
9    
10    const lightOn = async(data) => {
11      console.log("Body sent to server", {
12      entity_id: entity_id, 
13      brightness: brightness_value
14    })
15      await axios.post('xxx.com',
16        {
17          entity_id: entity_id, 
18          brightness: brightness_value
19        },
20        {
21          headers: {
22            'Content-Type': 'application/json',
23            'Authorization': `Bearer ${cookies.get('accesstoken')}`
24          },
25        })
26        .then(result => {
27          console.log('Turn on!');
28          getDevices();
29        })
30        .catch(err => {
31          console.log('Turn on Missed!');
32        });
33    }
34    
35    const getDevices = async(data) => {
36      await axios.get('xxx.com',
37        {
38          headers: {
39            'Content-Type': 'application/json',
40            'Authorization': `Bearer ${cookies.get('accesstoken')}`
41          },
42        })
43        .then(result => {
44          console.log(result.data)
45          setLight(result.data.attributes.light);  
46          setBrightnessValue(result.data.attributes.light.filter(c => c.entity_id === entity_id).map((item,i) =>  item.brightness)[0]);  
47        })
48        .catch(err => {
49          console.log(err);
50        });
51    }
52    
53
54
55    useEffect(() => {
56      getDevices();
57      }, []);
58
59return (
60  <div>
61      <input className="range-input" type="range" name="speed" min="0" max="100" id="slider"
62      value={brightness_value} onChange={lightOn} style={{ background: gradient, }}></input>
63
64  </div>
65);
66};
67
68export default LightSliderBar;
69