Extend or append data received from EMQx Websocket

plotly.js
1

Hi, I am constantly sending processed data from a script in python (my data is an array with negatives integers) and receiving it in javascript.

Basically,
Here I received the data:

client.on('message', (topic, message) => {
        topi = topic
        msj = JSON.parse(message)
        //timeMSG = msj.time
        heightsMSG = msj.heights
})

Here is my div:

  <div id = "myDiv"></div>

                    <script >
                          var data = [
                          {
                            z: [[-16, -10, -13, -21, -20, -27, -23, -29, -27, -29,
                              -32, -29, -35, -30, -34, -33, -33, -38, -33, -39, -35, -37, -38,
                              -35, -41, -36, -40, -38, -38, -42, -38, -43, -39, -41,
                              -42, -39, -45, -39, -44, -41, -41, -45, -41, -46, -41, -44,
                              -44, -42, -47, -42, -47, -43, -44, -47, -43, -49, -43, -46,
                              -46, -44, -49, -44, -49, -45, -46, -48, -45, -50, -45, -48,
                              -47, -46, -50, -45, -51, -47, -48, -49, -46, -52, -47, -50,
                              -48, -48, -52, -47, -52, -48, -49, -51, -48, -53, -48,-52, -50,
                              -49, -53, -48, -54, -49, -51, -51, -49, -54, -49, -53, -50, -50,
                              -54, -49, -55, -50, -52, -52, -50, -55, -50, -54, -51, -52, -54,
                              -50, -56, -51, -53, -53, -51, -56, -51, -55, -52, -53, -55, -51,
                              -57, -52, -55, -54, -52, -57, -52, -57, -53, -54, -56, -52, -58,
                              -53, -56, -54, -53, -57]],
                            type: 'heatmap'
                          }
                        ];

                        Plotly.react('myDiv', data);


                    </script> 

                  </div>

What I am trying to do is:
Every time a message arrives, extract the data called “height” and append it into the value “z” and this should “update” the plot

What I tried is:
1.-

client.on('message', (topic, message) => {
        topi = topic
        msj = JSON.parse(message)
        //timeMSG = msj.time
        heightsMSG = msj.heights
        Plotly.extendTrace('myDiv', {z: [[heightsMSG]]}, [0])
})

2.-

    client.on('message', (topic, message) => {
         //const obj = JSON.parse(payload.toString()) // payload is a buffer
        topi = topic
        msj = JSON.parse(message)
        //timeMSG = msj.time
        heightsMSG = msj.heights

        console.log('\nMSG Date - Time: qwe');

          Plotly.plot('myDIv', [{
              type: 'heatmap',
              z: [
                [1,2,30],
                [2,1,2],
                [3,1,2]
              ]
              }])
              .then((gd) => {
              return new Promise((resolve) => {
               setTimeout(() => { resolve(gd) }, 1000)
              })
              })
              .then((gd) => {
              gd.data[0].zmin = null;
              gd.data[0].zmax = null;

              return Plotly.extendTraces(gd, {
                z: [[[10, 2, 3, 30]]]
              }, [0])
          })

What I get is a chart just with the axis when I start seding the data