Both click() and dispatchEvent does not trigger automatic click in reactjs

I have a react component that has an SVG image. I have divided the SVG into multiple react box. I have query selector which selects all the react box and JS click event to auto click that react.

I tried working with both click and dispatch event. But none of them works in my scenario.

Below is the section of the code I am working on.

componentDidMount() {
    var element =  document.querySelectorAll("square");
    for(var i = 0; i<element.length; i++) {
      element[i].dispatchEvent(new Event('click'));
    }
}

render(){
    return (
      <React.Fragment>
        <div className="col-12">
          <svg  viewBox="0 0 100 100">
            <image xlinkHref={imageFile}  height="100%" width="100%" />
            <g><rect className="square" x="10" y="10" width="20" height="10" fillOpacity=".2"  onClick={() =>console.log("clicked")}></rect> </g>         
            <g><rect className="square" x="30" y="10" width="20" height="10" fillOpacity=".4"  onClick={() =>console.log("clicked")}></rect> </g>              
          </svg>
        </div>
      </React.Fragment>
    )
  

}

I also tried using the click() function and did not work for SVG images and also is there a way we could automate a click in each square every 10 seconds?

from Both click() and dispatchEvent does not trigger automatic click in reactjs