React, updating array to a new array doesn\'t re-render the dom with the new array

Question

so i'm looping over an array, and every element has a click event :

{optionsCategory.map((c,i) => (
     <div className="content" key={i} onClick={(e) => handleCategoryClick(e,c)}>
        {c.name}
     </div>
     ))}

upon clicking if the element has a subCategory i want to assing the subCategory array to the optionsCategory

const handleCategoryClick = async (e: React.MouseEvent<HTMLHeadingElement>, c: Category) => {
if(c.subCategories.length > 0) {
  setOptionsService([...c.subCategories])
  console.log([optionsCategory])
}
else{
  setIsCategory(true);
  const data = await onActsByServiceIdAndCategoryId(serviceId,c.id);
  setActs([...data])
  console.log(acts);
}}

in the console the optionsCategory is updated but not in the Dom

Answer 1

Are you using useState hook for optionsCategory ?