How to pick exact item after array was mapped, using useRef

Question

I mapped the array to recieve a cards on my page. Then onClick I want to get each of them. This way I only get the last one "56". How can I get the one I cliked on?

import { useRef } from "react";

const arr = [22, 45, 56]

export default function AccessingElement() {
  const elementRef = useRef();

  function Click() {
     
    console.log(elementRef.current);
  }

  return (

    <div className='main'>
      {arr.map(item => (

        <div ref={elementRef}>
          <h1>here i am {item}</h1>
          <div>
            <div>
              <button onClick={(elementRef)=>Click()}>click</button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
  
}