why its giving next element not current (react js)

I have stored array of objects in a state and I am using map over state to display content. whenever I click on button I get next element not the current. I don't know why whats happening here. If someone knows please tell me the solution,

Here is my code

function App() {  const [data, setData] = useState([    {      content:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, soluta.",    },    {      content:"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta aut, commodi laboriosam, eum neque laborum itaque quidem, vel nihil sint debitis est! Aut atque itaque tempora reprehenderit illo nemo consequatur.",    },  ]);  const main = useRef(null);  function getMain() {    console.log(main.current);  }  return (<>      {data.map((t, i) => {        return (<div key={i} className="main" ref={main}><p>{t.content}</p><button onClick={getMain}>mainElem</button></div>        );      })}</>  );}