How to animate a set of key frames given by loop in react app

[ChkBuk]

Hi,
In my app, I want to show the complete path of the motion when I trigger a loop. It works for single pairs (x,y) but does not work for an array of pairs.

When button click, it calls

this.state = {
xAxis1: [],
yAxis1: [],
newXAxis: [],
newYAxis: []
}



props.position.forEach(props => {
                    var a = document.getElementById(props);
                    var codinates = a.getBoundingClientRect();
                    var x = codinates.left + 35;
                    var y = codinates.top + 5;
                   
                     this.state.newXAxis1.push(x);
                      this.state.newYAxis1.push(y);
                });
                    this.setState({ xAxis1:  this.state.newXAxis});
                    this.setState({ yAxis1:  this.state.newYAxis });

Under the render()

 return (
            <div>
                <div className="grid">
                    <Grid arrOfObj={this.state.arrOfObj} />

                    <motion.div id="player1" className={className} animate={{ x: this.state.xAxis1, y: this.state.yAxis1 }}
                        transition={{ type: "tween", duration: 1 }}
                    ></motion.div>
                    {styles}
 );
    }
}
const { className, styles } = css.resolve`
  div {
    width: 20px;
    height: 20px;
    background: yellow;
  }

Simply, what I want is, move the circle from (x1,y1) -> (x2,y2) -> (x3,y3)
Instead of (x1,y1) -> (x3,y3)