I have a list, containing some jsx components like components:

components = [
  <span className="c1 c2" onClick={() => console.log("test")}>...</span>,
  <span className="c1 c2" onClick={() => console.log("test")}>...</span>,
  <span className="c1 c2" onClick={() => console.log("test")}>...</span>,
]

BTW the components, is made with pushing into array:

for(...) {
  components.push(<span ...>...</span>)
}

and i use this list as below:

const MyList = () => {
  return (
    <p>{components}</p>
  )
}

the problem is that, after rendering, items don’t have any onClick (or onclick event handler) function.
although they have class property.
browsers inspector shows them like:

// there is no 'onclick' function
<span class="c1 c2">...</span>
...

I appreciate any help.