Can't react a 3d chart with react-plotly

I am using "react-plotly.js": "^2.3.0", and plotly.js 1.45.3.
I am trying to recreate this graph in reactjs version 16.8.
But all the charts are 2d and i can't even see anything in the screen. (No errors there).

import React from 'react';
import Plot from 'react-plotly.js';
import graphData from '../../public/resources/3d-graph.json';

> class Graphs extends React.Component {
>     render(){
>       return(
>         <Plot
>             data={[
>             {
>                 type: 'surface',
>                 x: graphData.x,
>                 y: graphData.y,
>                 z: graphData.z
>             }
>             ]}
>             layout={
>                 {
>                     width: 800,
>                     height: 600,
>                     margin: {
>                         l: 50,
>                         r: 50,
>                         b: 80,
>                         t: 90,
>                         pad: 4
>                     },
>                     title: graphData.masterGraph.title,
>                     annotations: [{
>                         text: graphData.masterGraph.model,
>                           font: {
>                           size: 14,
>                           color: '#444444',
>                         },
>                         showarrow: false,
>                         align: 'center',
>                         x: 0.5,
>                         y: 1.1,
>                         xref: 'paper',
>                         yref: 'paper',
>                     }],
>                     scene: {
>                         xaxis: {
>                             title: graphData.masterGraph.xAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         },
>                         yaxis: {
>                             title: graphData.masterGraph.yAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         },
>                         zaxis: {
>                             title: graphData.masterGraph.zAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         }
>                     }
>                 }
>             }
>         />
>       )
>     }
>   }
> 
> export default Graphs

首先，使用 react-plotly.js 2.3.0、plotly.js 1.45.3、React 16.8 以及匯入的 3d-graph.json 資料重現 Graphs 元件。檢查如何處理 surface trace 和 scene layout，然後驗證 3D 圖表是否能夠在沒有錯誤的情況下正常顯示。