How do I change the html mark style using react?

I have such an div element:

 <div className="rate" > 
       <mark className="rate-mark"> Rate : </mark>
       <mark className="val-mark" style={{color}}> {rate}</mark>
 </div>

where the color is a hook:

var green = "#0cb87f";
var red = "#ce2020";

const [color,setColor] = useState(green)

I'm trying to dynamically change the color like this :

if (response.getRate() < rate){
   setColor(red)
}else{
   setColor(green)
}

But in my case it turns out that the light is always green.I think the mark page element is just never updated.How can this be made to work?