Sequential Sankey with Plotly.js - keeping nodes in same oder between groups

plotly.js
1

Trying to use plotly.js so show student grade transitions between quizzes. In Plotly.js the node order (i.e. score bands such as 0-40) is changed between the quizzes. Is there a way to keep them in the same order between quizzes (eg 0.40 is always at the bottom).

Any help appreciated even if it is directions creating a new plotly.js chart type that can be used with plotly react.

var trace1 = {
  type: "sankey",
  orientation: "h",
  node: {  
   groups: ["Quiz 1", "Quiz 2", "Quiz 3", "Quiz 4"],
   label: ["0-40", "41-60", "61-70", "71-80", "81-100","0-40", "41-60", "61-70", "71-80", "81-100","0-40", "41-60", "61-70", "71-80", "81-100"],
   color: ["red", "orange", "blue", "green", "green","red", "orange", "blue", "green", "green","red", "orange", "blue", "green", "green"]
  },
  link: {
    source: [0,1,2,3,4,5,6,7,8,9],
    target: [6,6,7,8,8,11,11,12,14,14],
    value:  [3,1,1,2,1,3,1,1,2,4,5]
  }
};

var data = [ trace1 ];

var layout = {
   title: {
      text:'SANKEY Title',
      font: {
         family: 'Courier New, monospace',
         size: 24
      },
   },
   annotations: [{
      text: 'QUIZ 1',
      x: 0.0,
      y: 1.1,
      showarrow: false,
      font: {size: 12}
    }, 
    {
      text: 'QUIZ 2',
      x: 0.5,
      y: 1.1,
      showarrow: false,
      font: {size: 12}
    }, 
    {
      text: 'QUIZ 3',
      x: 1.0,
      y: 1.1,
      showarrow: false,
      font: {size: 12}
    }, 
    {
      text: 'QUIZ 4',
      x: 1.5,
      y: 1.1,
      showarrow: false,
      font: {size: 12}
    }],
   width: 600,
};

Plotly.newPlot('myDiv', data, layout);

<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

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