Chart.js couldn't refresh even setState has been called

I need to set several point plotting in chart, using scatter and line. But I don't know why, when I changed new value and use setState to change state of the chart. It wouldn't work.

main.js

import React, { Component } from 'react';

import Control from './Control/Control';
import './Main.css'

class Main extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: {
                upperX : 0,
                upperY : 0,
                lowerX : 0,
                lowerY : 0
            }
        }
    }
    handleCallback = (childData) => {
        this.setState({
            data: {
                upperX : childData.upperX,
                upperY : childData.upperY,
                lowerX : childData.lowerX,
                lowerY : childData.lowerY,
            }
        }, () => {
            console.log(this.state.data)
        })
    }
    render() {
        return (
            <div className="main-container">
                <Control parentCallback={this.handleCallback}></Control>
                <Cartesian data={this.state.data}></Cartesian>
            </div>
        );
    }
}

export default Main;

**control.js**

    import React, { Component } from 'react';
import {InputGroup, FormControl, Row, Col, Button} from 'react-bootstrap'
import './Control.css'

class Control extends Component {
    run = (event) => {
        const upperArm = document.querySelector(".upperarm > input").value;
        const lowerArm = document.querySelector(".lowerarm > input").value;
        const upperAngle = document.querySelector(".upperangle > input").value;
        const lowerAngle = document.querySelector(".lowerangle > input").value;
        
        const upperX = Math.cos(upperAngle) * upperArm; 
        const upperY = Math.sin(upperAngle) * upperArm; 
        const lowerX = Math.cos(lowerAngle) * lowerArm; 
        const lowerY = Math.sin(lowerAngle) * lowerArm;

        document.querySelector(".upperx > input").value = upperX + lowerX;
        document.querySelector(".uppery > input").value = upperY + lowerY;
        document.querySelector(".lowerx > input").value = lowerX;
        document.querySelector(".lowery > input").value = lowerY;

        const data = {
            upperX : upperX + lowerX,
            upperY : upperY + lowerY,
            lowerX : lowerX,
            lowerY : lowerY,
        }

        this.props.parentCallback(data);
        // event.preventDefault();
    }
    render() {
        return (
            <div id="control">
                <Row className="mt-5">
                    <Col>
                        <InputGroup size="sm" className="mb-3 upperarm">
                            <InputGroup.Prepend>
                            <InputGroup.Text id="inputGroup-sizing-sm">Upper Arm</InputGroup.Text>
                            </InputGroup.Prepend>
                            <FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                        </InputGroup>
                    </Col>
                    <Col>
                        <InputGroup size="sm" className="mb-3 lowerarm">
                            <InputGroup.Prepend>
                            <InputGroup.Text id="inputGroup-sizing-sm">Lower Arm</InputGroup.Text>
                            </InputGroup.Prepend>
                            <FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                        </InputGroup>
                    </Col>
                </Row>
                <Row className="mt-2">
                    <Col>
                        <InputGroup size="sm" className="mb-3 upperangle">
                            <InputGroup.Prepend>
                            <InputGroup.Text id="inputGroup-sizing-sm">Upper Angle</InputGroup.Text>
                            </InputGroup.Prepend>
                            <FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                        </InputGroup>
                    </Col>
                    <Col>
                        <InputGroup size="sm" className="mb-3 lowerangle">
                            <InputGroup.Prepend>
                            <InputGroup.Text id="inputGroup-sizing-sm">Lower Angle</InputGroup.Text>
                            </InputGroup.Prepend>
                            <FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                        </InputGroup>
                    </Col>
                </Row>
                <Row>
                    <Button className="ml-3 mb-2" variant="primary" onClick={this.run}>Run</Button>
                </Row>
                <Row>
                    <Col>
                        <InputGroup size="sm" className="mb-3 upperx">
                            <InputGroup.Prepend>
                            <InputGroup.Text id="inputGroup-sizing-sm">Upper X</InputGroup.Text>
                            </InputGroup.Prepend>
                            <FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                        </InputGroup>
                    </Col>
                    <Col>
                        <InputGroup size="sm" className="mb-3 uppery">
                            <InputGroup.Prepend>
                            <InputGroup.Text id="inputGroup-sizing-sm">Upper Y</InputGroup.Text>
                            </InputGroup.Prepend>
                            <FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                        </InputGroup>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <InputGroup size="sm" className="mb-3 lowerx">
                            <InputGroup.Prepend>
                            <InputGroup.Text id="inputGroup-sizing-sm">Lower X</InputGroup.Text>
                            </InputGroup.Prepend>
                            <FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                        </InputGroup>
                    </Col>
                    <Col>
                        <InputGroup size="sm" className="mb-3  lowery">
                            <InputGroup.Prepend>
                            <InputGroup.Text id="inputGroup-sizing-sm">Lower Y</InputGroup.Text>
                            </InputGroup.Prepend>
                            <FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                        </InputGroup>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default Control;

**Cartesian.js**

    import React, { Component } from 'react';
import './Cartesian.css'
import {Scatter} from 'react-chartjs-2';
         
class Cartesian extends Component {
    state = {
        mydata : {
            datasets: [{
                label: 'Manipulator Robot',
                data: [{
                        x: 0,
                        y: 0
                    }, {
                        x: this.props.data.lowerX,
                        y: this.props.data.lowerY
                    }, {
                        x: this.props.data.upperX,
                        y: this.props.data.upperY
                    }
                ],
                borderColor: 'black',
                borderWidth: 10,
                pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
                pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
                pointRadius: 5,
                pointHoverRadius: 5,
                fill: false,
                tension: 0,
                showLine: true
            }]
        },
        option : {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    ticks : {       
                        autoSkip: true,
                        suggestedMax: 10,
                        suggestedMin: -10,
                    },
                }],
                yAxes: [{
                    ticks : {
                        suggestedMax: 10,
                        suggestedMin: -10
                    },
                }]
            },
            rotation: 90
        }
    }
    render() {
        return (
            <div id="cartesian">
                <Scatter data={this.state.mydata} options={this.state.option} height={300} width={700} redraw/>
            </div>
        );
    }
}

export default Cartesian;