How to use the @nivo/core.useTheme function in @nivo/core

const CircleAnnotationOutline = memo(({ x, y, size }) => {
    const theme = useTheme()
    const { animate, springConfig } = useMotionConfig()

    if (!animate) {
        return (
            <>
                {theme.annotations.outline.outlineWidth > 0 && (

x,
    y,
    length,
    ticksPosition,
    tickValues,
    tickSize,
    tickPadding,
    tickRotation,
    format,
    renderTick,
    legend,
    legendPosition,
    legendOffset,
    onClick,
}) => {
    const theme = useTheme()
    const { animate, springConfig } = useMotionConfig()

    const formatValue = useMemo(() => getFormatter(format, scale), [format, scale])

    const { ticks, textAlign, textBaseline } = computeCartesianTicks({
        axis,
        scale,
        ticksPosition,
        tickValues,
        tickSize,
        tickPadding,
        tickRotation,
    })

    let legendNode = null
    if (legend !== undefined) {

const ChordRibbonTooltip = memo(({ ribbon }) => {
    const theme = useTheme()

    return (
        ,
                    <strong>{ribbon.source.label}</strong>,
                    ribbon.source.formattedValue,
                ],
                [
                    ,
                    <strong>{ribbon.target.label}</strong>,
                    ribbon.target.formattedValue,
                ],
            ]}

const RectAnnotationOutline = memo(({ x, y, width, height }) => {
    const theme = useTheme()
    const { animate, springConfig } = useMotionConfig()

    if (!animate) {
        return (
            <>
                {theme.annotations.outline.outlineWidth > 0 && (

padAngle,
        colors,
    })

    const { setCurrentArc, setCurrentRibbon, getArcOpacity, getRibbonOpacity } = useChordSelection({
        arcs,
        arcOpacity,
        arcHoverOpacity,
        arcHoverOthersOpacity,
        ribbons,
        ribbonOpacity,
        ribbonHoverOpacity,
        ribbonHoverOthersOpacity,
    })

    const theme = useTheme()
    const getLabelTextColor = useInheritedColor(labelTextColor, theme)
    const getArcBorderColor = useInheritedColor(arcBorderColor, theme)
    const getRibbonBorderColor = useInheritedColor(ribbonBorderColor, theme)

    const layerContext = useChordLayerContext({
        center,
        radius,
        arcs,
        arcGenerator,
        ribbons,
        ribbonGenerator,
    })

    if (radius <= 0) return null

    const legendData = arcs.map(arc => ({

const CustomTick = tick => {
    const theme = useTheme()

    return (

const RadarGridLabels = memo(({ radius, angles, indices, label: labelComponent, labelOffset }) => {
    const theme = useTheme()
    const { animate, springConfig } = useMotionConfig()

    const labels = indices.map((index, i) => {
        const position = positionFromAngle(angles[i], radius + labelOffset)
        const textAnchor = textAnchorFromAngle(angles[i])

        return {
            id: index,
            angle: radiansToDegrees(angles[i]),
            anchor: textAnchor,
            ...position,
        }
    })

    if (animate !== true) {
        return

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 => (

const LinesLabels = ({ series, getLabel, position, padding, color }) => {
    const theme = useTheme()
    const { animate, springConfig } = useMotionConfig()
    const labels = useSeriesLabels({
        series,
        getLabel,
        position,
        padding,
        color,
    })

    if (!animate) {
        return labels.map(label => {
            return (

isInteractive,
        onMouseEnter,
        onMouseMove,
        onMouseLeave,
        onClick,
        tooltip,
        debugMesh,
    }) => {
        const canvasEl = useRef(null)
        const [currentNode, setCurrentNode] = useState(null)
        const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
            width,
            height,
            partialMargin
        )
        const theme = useTheme()

        const { nodes, xScale, yScale } = useSwarmPlot({
            width: innerWidth,
            height: innerHeight,
            data,
            groups,
            groupBy,
            identity,
            label,
            value,
            valueFormat,
            valueScale,
            size,
            spacing,
            layout,
            gap,