why class not render after set state in react js?

I want to add an active class to the indicator after clicking it but the active class doesn’t render even though list.id === active

const [active, setActive] =  useState(1);

const scrollToElement = (id, value) => {
    const element = document.getElementById(`${value}`);
    element.scrollIntoView({ behavior: 'smooth' });

    setActive(prevState => {
      return {
        ...prevState,
        active: id
      }
    });
  }
  
<div
  key={list.id}
  className={`${list.id === active ? `${style.active} ${style.dot}` : `${style.dot}`}`}
  onClick={() => scrollToElement(list.id, list.name)}
/>