Get position of 3 seperate divs in ReactJS - reactjs

Question

I have 3 divs, which I'm displaying in a ReactJS app.
I'm displaying the divs, by looping through an object of classNames stored in state. (Each className has it's own CSS styling, which displays a color - hat1, hat2, hat3).
OnClick, I want to get the div coordinates/position of any of the 3 divs I click on.
I've tried using React.createRef() and getBoundingClientRect(). However, both methods give me the same coordinates, no matter which div I click on.
It looks like it's returning the coordinates of the <section> tag, rather than the target div element I click on...
What am I doing wrong?
class Cylinders extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {
divs: [
{
className: 'hat1'
},
{
className: 'hat2'
},
{
className: 'hat3'
}
]
}
}
componentDidMount = () => {
console.log('mount');
}
handleClick = (item, i) => {
console.log('item', item);
console.log('i', i);
var divCoordinates = ReactDOM.findDOMNode(this).getBoundingClientRect();
console.log(divCoordinates, 'divCoordinates');
// const node = this.myRef.current;
// console.log('node', node);
}
render() {
return (
<section>
<div className="columns is-mobile">
<div className="column">
<h1 className="title has-text-black is-size-2">Cylinders Game</h1>
<button className="has-text-black">Ball container</button>
</div>
</div>
<div className="columns is-mobile">
<div className="colum ballContainer">
<div className="ball"></div>
</div>
</div>
<div className="columns is-mobile">
{this.state.divs.map((item, i) => {
return (
<div className="column">
<div className="columns is-multiline">
<div
onClick={() => this.handleClick(item, i)}
className={item.className}
key={item.name + i}
ref={el => this.containerLine = el}
> {i}
</div>
</div>
</div>
)
})}
</div>
</section>
);
}
}
export default Cylinders;

Answer 1

I got it working!
I simply targeted the item, with item.target.
var divCoordinates = ReactDOM.findDOMNode(item.target).getBoundingClientRect();