Необработанное отклонение (TypeError): невозможно прочитать свойство getContext со значением null

В моем приложении есть 3 страницы: вход в систему, регистрация и панель инструментов. когда я перенаправляюсь обратно на панель инструментов, когда при входе в систему я получаю эту ошибку. ошибка находится в компоненте, который называется диаграммой показаний датчика SensorReadingChart.js

class SensorReadingChart extends Component {

    _isMounted = false;
    chartRef = React.createRef();
    constructor(props) {
        super(props);
        threshold = props.threshold
        xAxisLabel = props.xAxisLabel
        yAxisLabel = props.yAxisLabel
        chartTitle = props.chartTitle
        x = props.x
        y = props.y
        location = props.location
        icon = props.icon
        apiEndPoint = props.apiEndPoint
        yUnit = props.yUnit
        themeColor = props.themeColor

        this.state = {
            sensorReadings:[]
        }
    }

    render() {
        dataPoints = this.state.sensorReadings.map(
            (sensor) => {
                return {
                    x: sensor[x], //change this to proper key
                    y: sensor[y], //change this to proper key
                    location: sensor[location], //change this to proper key
                }
            });
        thresholdLine = this.state.sensorReadings.map(
            (sensor) => {
                return {
                    x: sensor.id, //change this to proper key
                    y: threshold,
                }
            });
        options = {
            type: "line",
            data: {
                xLabels: dataPoints.map(x=>{return x.x}),
                datasets: [
                    {
                        data: dataPoints.map(y=>{return y.y}), //Sample data set [{x:1, y:21},{x:2, y:25},{x:3, y:31},{x:4, y:11},]
                        showLine: true,
                        fill: false,
                        borderColor: themeColor[1],
                        label: yAxisLabel+" Graph",
                        pointBackgroundColor: function(context) {
                            let index = context.dataIndex;
                            let value = context.dataset.data[index];
                            return value > threshold ? themeColor[0] : 'transparent';
                        },
                        pointBorderColor: function(context) {
                            let index = context.dataIndex;
                            let value = context.dataset.data[index];
                            return value > threshold ? themeColor[0] : 'transparent';
                        }
                    },
                    {
                        data: thresholdLine.map(y=>{return y.y}),
                        showLine: true,
                        borderColor: themeColor[0],
                        fill: false,
                        pointBorderColor: "transparent",
                        label: "threshold = "+threshold+" "+yUnit
                    }
                ]
            },
            options: {
                animation: {
                    duration: 0
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            let label = yAxisLabel+" : "+tooltipItem.yLabel+" F  |  "+xAxisLabel+" : "+tooltipItem.xLabel;


                            if (tooltipItem.yLabel > threshold) {
                                label += "  |  Location : "+data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].location //change this to proper key

                            }
                            return label;
                        }
                    }
                },
                scales: {
                    yAxes: [
                        {
                            scaleLabel: {
                                display: true,
                                labelString: yAxisLabel + " in " + yUnit,
                            },
                        },
                    ],
                    xAxes: [
                        {
                            scaleLabel: {
                                display: true,
                                labelString: xAxisLabel,
                            },
                        },
                    ],
                },
            }
        }

        if (this.state.sensorReadings.length === 0)
        {
            return (<h5 className = "card-subtitle mb-2 text-muted " align = {"center"}><i className = "bi bi-lightning"/>No Readings Yet!</h5>)
        }
        else{
        return (

            <div>
                <div><big><i className = {icon} style = {{color: themeColor[0]}}/>{chartTitle}</big></div>
                <br/>
                <canvas
                    id = "myChart"
                    ref = {this.chartRef}
                />
            </div>
        )}
    }
    componentDidMount() {
        this._isMounted = true;
        if (this._isMounted){
        SensorService.getSensorReadings(apiEndPoint).then((response)=>{
            const sensorReadings = response.data
            this.setState({sensorReadings})
            const myChartRef = this.chartRef.current.getContext("2d");
            new Chart(myChartRef, options);
        });
    }
    }

    componentWillUnmount(){
        this._isMounted = false;
    }
    

}

export default SensorReadingChart;

Поэтому я хочу перенаправить на страницу входа без этой ошибки Вот полная ошибка

Необработанное отклонение (TypeError): невозможно прочитать свойство getContext со значением null (анонимная функция) источник/компоненты/SensorReadingChart.js:154

152 |         const sensorReadings = response.data
153 |         this.setState({sensorReadings})
> 154 |         const myChartRef = this.chartRef.current.getContext("2d");
    | ^  155 |         new Chart(myChartRef, options);
156 |     });
157 | }

Посмотреть скомпилированный Этот экран виден только в разработке. Он не появится, если приложение выйдет из строя в рабочей среде. Откройте консоль разработчика вашего браузера для дальнейшего изучения этой ошибки. Нажмите «X» или нажмите ESC, чтобы закрыть это сообщение.