React Plotly Does Not Load

I am trying to reload a plotly graph every time the user submits another input form. The input form tells my graph how much % of the data from the two arrays, stock_dates and stock_data it should graph. However, when I enter anything inside the form, the plotly graph breaks and this is what I see:

enter image description here

import React, { Component } from 'react';
import Plot from 'react-plotly.js';

class LineChart extends Component {

    stock_dates = [1, 2, 3, 4]
    stock_data = [1, 2, 3, 4]


    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            value: 100
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value })
    }
    handleSubmit(event) {
        this.setState({ visible: true })
        event.preventDefault();
    }
    getDateData() {
        return this.stock_dates;
    }
    getStockData() {
        return this.stock_data;
    }

    render() {



        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label> Number:

                        <input type="text" value={this.state.value} onChange={this.handleChange} />

                    </label>
                    <input type='submit' value='SUBMIT' />
                </form>,
                <Plot
                    data={[
                        {
                            x: this.getDateData().splice(this.state.value),
                            y: this.getStockData().splice(this.state.value),
                            type: 'scatter'
                        }
                    ]}
                    layout={{ width: 1000, height: 500, title: 'Stock Data' }}
                />

            </div>


        );


    }

}

export default LineChart;