Убрал рефы.

Починил поведение при неизменяющемся значении

src/components/Display.jsx

@@ -1,28 +1,42 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } 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('---')
-  const arrowRef = useRef(null);
+  const [arrowState, setArrowState] = useState(0)
 
   useEffect(()=>{
-    if(value)
+    if(value){
       if(Number.isFinite(+value)){
-        setVal((+value).toPrecision(4)??'---')
         if (isArrowVisible)
         {
+          let newArrowState = 0
           if (value > oldVal)
-            arrowRef.current = (<CaretUpOutlined style={{color:"red"}} />)
+            newArrowState = 1
-          else if (value < oldVal)
+          if (value < oldVal)
-            arrowRef.current = (<CaretDownOutlined style={{color:"red"}} />)
+            newArrowState = -1
+          setArrowState(newArrowState)
           setOldVal(value)
         }
-      } else
+        setVal((+value).toPrecision(4)??'---')
-      setVal(value)
+      }
+      else
+        setVal(value)
+    }
+
   },[value])
 
-  return(<span className='display_value'>{prefix} {val} {suffix}{arrowRef.current}</span>)
+  let arrow = null
+  switch  (arrowState){
+    case 1:
+      arrow = <CaretUpOutlined style={{color:"red"}}/>
+      break;
+    case -1:
+      arrow = <CaretDownOutlined style={{color:"red"}}/>
+  } 
+
+  return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
 }
 
 export const Display = (props)=>{