#React - Access a DOM element in a dynamic list

list.js

const Square = () => { // Root Functional Component
	let listRef = React.useRef(null); // React Hook
   
   const click = () => { // 'this' points to window
   	var children = listRef.current.querySelectorAll('div');
      var domElement = children[2]; // third DOM element
   	alert(domElement.textContent);
   }

  console.log("render square");
  
  // View
  return (
   <div ref={listRef} style={{ backgroundColor:'blue'}}> 
      {
      	[1,2,3].map((key) => {
          return (
          	<div key={key} style={{ margin:'1rem', textAlign:'center', backgroundColor:'red'}}>
               { key }
            </div>
          );
         })
      }
      <button onClick={click}>Access Third Element</button>
   </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(<Square />);