I'm using react-plotly for implementing a line graph inside a React functional component as shown in the code below. However, when I try to plot my data using an array of values, it won't show anything. I'm using scattergl because I have a big set of data points to display. I need help with this issue. I'm using react.js version 17.0.2 and react-plotly version 2.5.1.

Here's my code:

import React from 'react';
import Plot from 'react-plotly.js';
import mydata from '../data/allData.json';


const MyApp = () => {

    // Transform Data
    const transformData = mydata.map((d) => {
        let traces = [];
        let plot_data = [];
        let xx = [];
        let yy = [];
        let ss = [];
        ss.push(d.mydata_id)
        d.data.map((each) => {
            xx.push(each.datetime_read)
            yy.push(each.surge_count)
        });
        plot_data['x'] = xx;
        plot_data['y'] = yy;
        plot_data['s'] = ss;
        // console.log("Plot Data: ", plot_data)

        traces.push({
            x: plot_data['x'],
            y: plot_data['y'],
            type: 'scattergl',
            marker: {color: 'green'},
            name: plot_data['s']
        });

        return traces
    });

    return (
        <div>                
            <div>
                <Plot
                    data={transformData}
                    layout={{...}}                    
                />
            </div>
        </div>
    )
};

Here's my data:

[
    {
        "mydata_id": "00175784",
        ...
        "data": [
            {
                "datetime_read": "2022-03-16 03:15:00",
                ...
                "surge_count": "240"
            },
            {
                ...
            }
        ]
    },
    {
        "mydata_id": "00161784",
        ...
        "data": [
            {
                "datetime_read": "2022-03-16 03:20:00",
                ...
                "surge_count": "194"
            },
            {
                "datetime_read": "2022-03-16 03:15:00",
                ...
                "surge_count": "342"
            },
            {
                ...
            }
        ]
    }
]

I would also like to note that when I try to display specific data in the array with data={transformData[2]}, it works just fine. But my goal is to display all data in the transformData array.