React siblings element's refs point to the same element

I am working with HTML5 canvas via react-konva library. Whenever I click on a canvas, I add a point to main component's state array.

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      points: []
    }

    this.handleStageClick = this.handleStageClick.bind(this);
  }

handleStageClick(e) {
    let {x, y} = e.currentTarget.getPointerPosition(); // method from Konva
    this.setState({ points: [ {x, y}, ...this.state.points ] });
};

render() {
    return (
        <Stage
          width={window.innerWidth * dimensions.canvasWidthMultiplier}
          height={window.innerHeight * dimensions.canvasHeigthMultiplier}
          onClick={this.handleStageClick}
        >
          <Layer>
            {
              this.state.points.map((point, idx) => <Point x={point.x} y={point.y} key={idx} id={idx} />)
            }
          </Layer>
        </Stage>
    );
  }
}

I want each point to animate when appearing, thus I moved react-konva Circle to a separate component, where I use refs to assign DOM circle element an animation, as described in react-konva tutorial.

class Point extends React.Component {
  constructor(props) {
    super(props);

    this.changeSize = this.changeSize.bind(this);
    this.point = React.createRef();
  }

  changeSize(to) {
    this.point.current.to({
      scaleX: to,
      scaleY: to,
      duration: 0.2
    })
  }

  componentDidMount() {
    this.changeSize(6);
  }

  render() {
    let { x, y, id } = this.props;

    return (
      <Circle
        ref={this.point}
        x={x}
        y={y}
        radius={.5}
        fill={colors.point}
        key={id}
      />
    );
  }
}

When I add the first point - it is animating as intended, but when I add next ones - the creation animation is played on the first one, not on the created points.

I've read that refs can't be assigned in a loop, though in my case I just create a bunch of Components in a loop, each one with its own ref, don't I?

Moreover, I tried to console log the ref which I assign animation to in changeSize method, and it turned out the ref points to the correct point, nevertheless animation plays on the first point created.

And the most obvious question: how to make each new point to animate on creation?