Multiple charts using ContinuousColorsLegendSvg share the same legend color scale

[palatinus-sb]

Description

"@nivo/core": "0.88.0",
"@nivo/heatmap": "0.88.0",

Multiple charts using ContinuousColorsLegendSvg (like Heatmap) share the same legend color scale even if differing colors were passed to them as props.

To Reproduce
CodeSandbox showcasing the bug: https://codesandbox.io/p/sandbox/nivo-legends-bug-y6l5kd

Steps to reproduce the behavior:

1. Create a project with 2 or more Heatmap charts
2. Pass them the required props along with 1 legend for each chart
3. Define differing colors for each chart
4. Notice that all charts share the same color scale for their legends

Expected behavior
Each chart's legend to inherit the chart's coloring and not share the same color scale.

Screenshots

Additional context
The bug appears to come from the non-unique id generation inside ContinuousColorsLegendSvg resulting in an id conflict inside the DOM.

nivo/packages/legends/src/svg/ContinuousColorsLegendSvg.tsx

Line 55 in af22689

const id = `ContinuousColorsLegendSvgGradient.${direction}.${colorStops