score:1

that's because you're using single ref for all of your elements. that mean's during the iteration, each element replaces the previous element as the value of content.current. that's why, no matter what element you click, you only get the last one.

you can use something like this instead:

ref={(el)=>el && content.current.push(el)}

and on the click function you can pass the index as well and do this:

onclick={()=>modifyvalueunit(value.valueunit,index)}

const modifyvalueunit = (unit,index) => {
  content.current[index].click();
}

Related Query

More Query from same tag