Cannot access customdata array

I can access customdata without an issue if customdata is not an array, hovertemplate formats the x points according to the 1st function correctly.

customdata: d.x.map((x) => {
          const years = Math.floor(x);
          const months = Math.floor(12 * (x % 1));
          if (years === 0) return `${months}m`;
          if (months === 0) return `${years}y`;
          return `${years}y ${months}m`;
        }),

        hovertemplate: `<b>${eyeNames[i]}</b><br>
            <i>Risk</i>: <br>
            <i>Risk</i>: %{y:.2p}<br>
            <i>Time</i>: %{customdata}<extra></extra>`,
      }));

To add another function to customdata, according to the documentation i need to convert customdata into an array, which i have done, but the hovertemplate no longer picks up customdata.

     customdata: [
          d.x.map((x) => {
            const years = Math.floor(x);
            const months = Math.floor(12 * (x % 1));
            if (years === 0) return `${months}m`;
            if (months === 0) return `${years}y`;
            return `${years}y ${months}m`;
          }),
          d.y.map((y) => {
            let p = y.toFixed(2);
            if (inverse1 === 0) return p;
            if (inverse1 === 1) {
              p = null;
            }
            return p;
          })
        ],

        hovertemplate: `<b>${eyeNames[i]}</b><br>
            <i>Risk</i>: %{customdata[1]}<br>
            <i>Risk</i>: %{y:.2p}<br>
            <i>Time</i>: %{customdata[0]}<extra></extra>`,
      }));

In hovertemplate if i write %{fullData.customedata} it picks up the array, but the functions map out every point instead of the single point hovered on the graph.

hovertemplate: `<b>${eyeNames[i]}</b><br> <i>Risk</i>: %{fullData.customdata[1]}<br> <i>Risk</i>: %{y:.2p}<br> <i>Time</i>: %{fullData.customdata[0]}<extra></extra>`, }));

What is the correct syntax here to access the customdata array and have the functions manipulate the hovered point on the graphs only, like in the first image, with the time variable. Thanks.

Start by comparing the two customdata shapes and the hovertemplate references shown in the issue. Check Plotly's point-level customdata and hovertemplate behavior, then verify the result against the examples in the report. Done means the hovered point displays the intended time and risk values without expanding the mapped arrays.