Update heatmap data, but do not modify the colorscale range

plotly.js
1

With the following code, when clicking on “Click me”, we change the data. How to make that when changing the data, the colorscale is not modified and the range stays the same (i.e. [1, 8] in my example)?

Live demo

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="button">Click me</div>
<div id="myDiv"></div>
<script>
var data = [{z: [[1, 2, 3, 4], [5, 6, 7, 8]], colorscale: 'Jet', type: 'heatmap'}];
Plotly.newPlot('myDiv', data, {}, {});
document.getElementById("button").onclick = () => {
    data[0]["z"] = [[1, 1, 2, 1], [2, 1, 1, 1]];
    console.log(data);
    Plotly.react('myDiv', data, {}, {});
};
</script>