diff --git a/src/components/Display.jsx b/src/components/Display.jsx
index 763b634..e39a9b7 100644
--- a/src/components/Display.jsx
+++ b/src/components/Display.jsx
@@ -1,11 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons'
 
 export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
   const [oldVal, setOldVal] = useState(NaN)
   const [val, setVal] = useState('---')
-
-  let arrow = null
+  const arrowRef = useRef(null);
 
   useEffect(()=>{
     if(value)
@@ -14,16 +13,16 @@ export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
         if (isArrowVisible)
         {
           if (value > oldVal)
-            arrow = <CaretUpOutlined style={{color:"red"}} />
+            arrowRef.current = (<CaretUpOutlined style={{color:"red"}} />)
           else if (value < oldVal)
-            arrow = <CaretDownOutlined style={{color:"red"}} />
+            arrowRef.current = (<CaretDownOutlined style={{color:"red"}} />)
           setOldVal(value)
         }
       } else
       setVal(value)
   },[value])
 
-  return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
+  return(<span className='display_value'>{prefix} {val} {suffix}{arrowRef.current}</span>)
 }
 
 export const Display = (props)=>{