adding labels on the links of sankey charts using plotly.js

I tried adding labels on the links of my sankey that would show the value of the link. I just tried adding "label" property to the link also in the trace of the sankey chart, but this did not work. Is this property for the links also possible like it exists for the nodes or is there any other way to add the values on the links and not just on the tooltips? Here is a code example fiddle

window.addEventListener('DOMContentLoaded', () => {
   const chartDiv = document.getElementById('chartDiv');

   const labels = ["Start", "Middle", "Begin", "End", "Final"];
   const labelIndex = new Map(labels.map((label, i) => [label, i]));
   const links = [
      { source: "Start", target: "Middle", value: 5, label: "Test" },
      { source: "Start", target: "Middle", value: 3, label: "Test2" },
      { source: "Middle", target: "Start", value: 1, label: "" },
      { source: "Start", target: "End", value: 2, label: "" },
      { source: "Begin", target: "Middle", value: 5, label: "Test" },
      { source: "Middle", target: "End", value: 3, label: "" },
      { source: "Final", target: "Final", value: 0.0001, label: "" }
   ];
   const sources = links.map(link => labelIndex.get(link.source));
   const targets = links.map(link => labelIndex.get(link.target));
   const values = links.map(link => link.value);

   const customData = links.map(link => [link.source, link.target, link.value]);

   const trace = {
      type: "sankey",
      orientation: "h",
      arrangement: "fixed",
      node: {
         label: labels,
         pad: 15,
         thickness: 20,
         line: { color: "black", width: 0.5 },
         hoverlabel: {
            bgcolor: "white",
            bordercolor: "darkgrey",
            font: {
               color: "black",
               family: "Open Sans, Arial",
               size: 14
            }
         },
         hovertemplate: '%{label}<extra></extra>',
         color: ["#a6cee3", "#1f78b4", "#b2df8a", "#a9b1b9", "#a9b1b9" ]
      },
      link: {
         source: sources,
         target: targets,
         value: values,
         label: values,
         arrowlen: 20,
         pad: 20,
         thickness: 20,
         line: { color: "black", width: 0.2 },
         color: sources.map(i => ["#a6cee3", "#1f78b4", "#b2df8a", "#a9b1b9", "#a9b1b9"][i]),
         customdata: customData,
         hoverlabel: {
            bgcolor: "white",
            bordercolor: "darkgrey",
            font: {
               color: "black",
               family: "Open Sans, Arial",
               size: 14
            }
         },
         hovertemplate:
            '<b>%{customdata[0]}</b> → <b>%{customdata[1]}</b><br>' +
            'Flow Value: <b>%{customdata[2]}</b><extra></extra>'
      }
   };

   const layout = {
      font: { size: 14 },
      //margin: { t: 20, l: 10, r: 10, b: 10 },
      //hovermode: 'closest'
   };

   Plotly.newPlot(chartDiv, [trace], layout, { responsive: true, displayModeBar: true })
      .then((plot) => {
         chartDiv.on('plotly_click', function(eventData) {
            console.log(eventData);
            if (!eventData || !eventData.points || !eventData.points.length) return;
            const point = eventData.points[0];
            if (typeof point.pointIndex === "number") {
               const nodeLabel = point.label;
               alert("Node clicked: " + nodeLabel + "\nNode index: " + point.pointIndex);
               console.log("Node clicked:", point);
            } else if (typeof point.pointNumber === "number") {
               const linkIdx = point.pointNumber;
               const linkData = customData[linkIdx];
               alert(
                  "Link clicked: " +
                  linkData[0] + " → " + linkData[1] +
                  "\nValue: " + linkData[2] +
                  "\nLink index: " + linkIdx
               );
               console.log("Link clicked:", point);
            } else {
               console.log("Clicked background", point);
            }
         });
      });
});