How to use the @nivo/colors.useOrdinalColorScale function in @nivo/colors

xScale: xScaleSpec = LineDefaultProps.xScale,
    xFormat,
    yScale: yScaleSpec = LineDefaultProps.yScale,
    yFormat,
    width,
    height,
    colors = LineDefaultProps.colors,
    curve = LineDefaultProps.curve,
    areaBaselineValue = LineDefaultProps.areaBaselineValue,
    pointColor = LineDefaultProps.pointColor,
    pointBorderColor = LineDefaultProps.pointBorderColor,
    enableSlices = LineDefaultProps.enableSlicesTooltip,
}) => {
    const formatX = useValueFormatter(xFormat)
    const formatY = useValueFormatter(yFormat)
    const getColor = useOrdinalColorScale(colors, 'id')
    const theme = useTheme()
    const getPointColor = useInheritedColor(pointColor, theme)
    const getPointBorderColor = useInheritedColor(pointBorderColor, theme)

    const { xScale, yScale, series: rawSeries } = useMemo(
        () => computeXYScalesForSeries(data, xScaleSpec, yScaleSpec, width, height),
        [data, xScaleSpec, yScaleSpec, width, height]
    )

    const series = useMemo(
        () =>
            rawSeries.map(serie => ({
                ...serie,
                color: getColor(serie),
            })),
        [rawSeries, getColor]

const { series: rawSeries, xScale, yScale } = useMemo(
        () =>
            computeSeries({
                width,
                height,
                data,
                xPadding,
                xOuterPadding,
                yOuterPadding,
            }),
        [width, height, data, xPadding, xOuterPadding, yOuterPadding]
    )

    const lineGenerator = useLineGenerator(interpolation)

    const getColor = useOrdinalColorScale(colors, 'id')
    const getSerieStyle = useSerieStyle({
        lineWidth,
        activeLineWidth,
        inactiveLineWidth,
        opacity,
        activeOpacity,
        inactiveOpacity,
        isInteractive,
        currentSerie,
    })

    const series = useMemo(
        () =>
            rawSeries.map(serie => {
                serie.color = getColor(serie)
                serie.style = getSerieStyle(serie)

layout,
    gap,
    colors,
    colorBy,
    forceStrength,
    simulationIterations,
}) => {
    const axis = layout === 'horizontal' ? 'x' : 'y'

    const getIdentity = useMemo(() => getAccessor(identity), [identity])
    const getLabel = useMemo(() => getAccessor(label), [label])
    const getValue = useMemo(() => getAccessor(value), [value])
    const formatValue = useValueFormatter(valueFormat)
    const getGroup = useMemo(() => getAccessor(groupBy), [groupBy])
    const getSize = useSize(size)
    const getColor = useOrdinalColorScale(colors, colorBy)

    const valueScale = useValueScale({
        width,
        height,
        axis,
        getValue,
        scale: valueScaleConfig,
        data,
    })

    const ordinalScale = useOrdinalScale({
        width,
        height,
        axis,
        groups,
        gap,

const { series, xScale, yScale } = useMemo(
        () => computeXYScalesForSeries(data, xScaleSpec, yScaleSpec, width, height),
        [data, xScaleSpec, yScaleSpec, width, height]
    )

    const formatX = useValueFormatter(xFormat)
    const formatY = useValueFormatter(yFormat)
    const rawNodes = useMemo(() => computePoints({ series, formatX, formatY }), [
        series,
        formatX,
        formatY,
    ])

    const getNodeSize = useNodeSize(nodeSize)

    const getColor = useOrdinalColorScale(colors, 'serieId')

    const nodes = useMemo(
        () =>
            rawNodes.map(rawNode => {
                return {
                    ...rawNode,
                    size: getNodeSize(rawNode.data),
                    style: {
                        color: getColor(rawNode.data),
                    },
                }
            }),
        [rawNodes, getNodeSize, getColor]
    )

    const legendData = useMemo(

yScale(tool.satisfactionRank)
                ])
                linePoints.push([xScale('satisfaction'), yScale(tool.satisfactionRank)])
                linePoints.push([innerWidth, yScale(tool.satisfactionRank)])

                return {
                    ...tool,
                    linePoints
                }
            }),
        [tools, xScale, yScale, linePadding, innerWidth]
    )

    const [currentTool, setCurrentTool] = useState(null)

    const getColor = useOrdinalColorScale(distinctColors, 'id')

    const theme = useTheme()

    return (
        
            
            
            {toolsWithPoints.map(tool => (

inactiveBorderOpacity,
    isInteractive,
    current,
}) => {
    const { series: rawSeries, xScale, heightScale } = useAreaBumpSeries({
        data,
        width,
        height,
        align,
        spacing,
        xPadding,
    })

    const areaGenerator = useAreaGenerator(interpolation)

    const getColor = useOrdinalColorScale(colors, 'id')
    const getSerieStyle = useSerieStyle({
        fillOpacity,
        activeFillOpacity,
        inactiveFillOpacity,
        borderWidth,
        activeBorderWidth,
        inactiveBorderWidth,
        borderColor,
        borderOpacity,
        activeBorderOpacity,
        inactiveBorderOpacity,
        isInteractive,
        current,
    })

    const series = useMemo(

blendMode,
        isInteractive,
        tooltipFormat,
        legends,
    }) => {
        const getIndex = useMemo(() => getAccessorFor(indexBy), [indexBy])
        const indices = useMemo(() => data.map(getIndex), [data, getIndex])

        const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
            width,
            height,
            partialMargin
        )
        const theme = useTheme()

        const getColor = useOrdinalColorScale(colors, 'key')
        const colorByKey = useMemo(
            () =>
                keys.reduce((mapping, key, index) => {
                    mapping[key] = getColor({ key, index })
                    return mapping
                }, {}),
            [keys, getColor]
        )

        const { radius, radiusScale, centerX, centerY, angleStep } = useMemo(() => {
            const computedMaxValue =
                maxValue !== 'auto'
                    ? maxValue
                    : Math.max(...data.reduce((acc, d) => [...acc, ...keys.map(key => d[key])], []))

            const radius = Math.min(innerWidth, innerHeight) / 2