원과 같은 UI를 어떻게 표시할 수 있고 데이터가 도착하면 특정 원의 색상을 변경할 수 있습니까?

하는 프로젝트를 진행하고 있습니다.

1- 화면에 50개의 원을 표시해야 합니다. 2- 내 데이터는 실시간으로 스트리밍됩니다. {id:0,color:"red"}를 저장하고 있는 객체 형태의 데이터입니다. 예를 들어 실시간 데이터의 id가 {id:10,color:"pink"}인 경우. 원 번호 10 색상은 분홍색이어야 합니다. 단순성을 위해 난 난수를 생성하기 위한 사용자 정의 후크를 생성하고 있습니다. //RandomNumber()는 사용자 정의 후크입니다.

  const [random,setRandom]=RandomNumber();
  useEffect(()=>{
    console.log(random);
    if(random>10 && random<200)
    {
        setColor("Red")
    }
   else if(random>500)
    {
     setColor("brown")
    }

})
return (
<div className="show-data" onWheel={onWheelHandler}>
{
        

            Array.apply(null, { length: 50 }).map((a, i) => (
             
                pad=="60px"?

                <button className="wave-circle"  style={{backgroundColor:color,padding:pad}}   onMouseOver={onMouseOverHandler}  onClick={onClickHandler} onMouseOut={onMouseLeaveHandle }  key={i}>
                
                {i+1} 
                
                </button>
                :
                <button className="wave-circle"  style={{backgroundColor:color,padding:pad}} value={i+1}   onMouseOver={onMouseOverHandler} onClick={onClickHandler} onMouseOut={onMouseLeaveHandle}  key={i}>
                </button>
        
            ) ,  

            )    
}