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

titleOffsetX: 0,
        titleOffsetY: 0,
        rangeComponent: BulletRectsItem,
        rangeColors: 'seq:cool',
        onRangeClick: noop,
        measureComponent: BulletRectsItem,
        measureColors: 'seq:red_purple',
        onMeasureClick: noop,
        markers: [],
        markerComponent: BulletMarkersItem,
        markerColors: 'seq:red_purple',
        onMarkerClick: noop,
        showTooltip: noop,
        hideTooltip: noop,
    }),
    withMotion(),
    withPropsOnChange(['rangeColors', 'scale'], ({ rangeColors, scale }) => ({
        rangeColorScale: getColorScale(rangeColors, scale, true),
    })),
    withPropsOnChange(['ranges', 'rangeColorScale'], ({ ranges, rangeColorScale }) => ({
        computedRanges: stackValues(ranges, rangeColorScale),
    })),
    withPropsOnChange(['measureColors', 'scale'], ({ measureColors, scale }) => ({
        measureColorScale: getColorScale(measureColors, scale),
    })),
    withPropsOnChange(['measures', 'measureColorScale'], ({ measures, measureColorScale }) => ({
        computedMeasures: stackValues(measures, measureColorScale),
    })),
    withPropsOnChange(['markerColors', 'scale'], ({ markerColors, scale }) => ({
        markerColorScale: getColorScale(markerColors, scale),
    })),
    withPropsOnChange(['markers', 'markerColorScale'], ({ markers, markerColorScale }) => ({

export default Component =>
    compose(
        defaultProps(ScatterPlotDefaultProps),
        withTheme(),
        withColors(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['symbolSize'], ({ symbolSize }) => ({
            getSymbolSize: getAccessorOrValue(symbolSize),
        })),
        withPropsOnChange(['data', 'width', 'height', 'scales'], computeScales),
        pure
    )(Component)

initialMaxEdge={initialMaxEdge}
          />
        
      )}
    
  );
};

Line.propTypes = LinePropTypes;

const enhance = compose(
  defaultProps(LineDefaultProps),
  withTheme(),
  withColors(),
  withDimensions(),
  withMotion(),
  withPropsOnChange(['curve', 'height'], ({ curve, height }) => ({
    areaGenerator: area()
      .x(d => d.x)
      .y0(height)
      .y1(d => d.y)
      .curve(curveFromProp(curve)),
    lineGenerator: line()
      .defined(d => d.value !== null)
      .x(d => d.x)
      .y(d => d.y)
      .curve(curveFromProp(curve))
  })),
  withPropsOnChange(
    ['data', 'stacked', 'width', 'height', 'minY', 'maxY'],
    ({ data, stacked, width, height, margin, minY, maxY }) => {
      let scales;

export default Component =>
    compose(
        defaultProps(StreamDefaultProps),
        withTheme(),
        withCurve(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['curveInterpolator'], ({ curveInterpolator }) => ({
            areaGenerator: area()
                .x(({ x }) => x)
                .y0(({ y1 }) => y1)
                .y1(({ y2 }) => y2)
                .curve(curveInterpolator),
        })),
        withPropsOnChange(['colors'], ({ colors }) => ({
            getColor: getOrdinalColorScale(colors, 'index'),
        })),
        withPropsOnChange(['borderColor', 'theme'], ({ borderColor, theme }) => ({
            getBorderColor: getInheritedColorGenerator(borderColor, theme),
        })),
        withPropsOnChange(['keys', 'offsetType', 'order'], ({ keys, offsetType, order }) => ({
            stack: d3Stack()
                .keys(keys)

export default Component =>
    compose(
        defaultProps(SankeyDefaultProps),
        withState('currentNode', 'setCurrentNode', null),
        withState('currentLink', 'setCurrentLink', null),
        withColors(),
        withColors({
            colorByKey: 'linkColorBy',
            destKey: 'getLinkColor',
            defaultColorBy: 'source.id',
        }),
        withTheme(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['nodeBorderColor'], ({ nodeBorderColor }) => ({
            getNodeBorderColor: getInheritedColorGenerator(nodeBorderColor),
        })),
        withPropsOnChange(['labelTextColor'], ({ labelTextColor }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor),
        })),
        withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
            getLabel: getLabelGenerator(label, labelFormat),
        })),
        pure
    )(Component)

export default Component =>
    compose(
        defaultProps(ChordDefaultProps),
        withState('currentArc', 'setCurrentArc', null),
        withState('currentRibbon', 'setCurrentRibbon', null),
        withMotion(),
        withTheme(),
        withDimensions(),
        withPropsOnChange(['label'], ({ label }) => ({
            getLabel: getLabelGenerator(label),
        })),
        withPropsOnChange(['padAngle'], ({ padAngle }) => ({
            chord: d3Chord().padAngle(padAngle),
        })),
        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
        })),
        withPropsOnChange(['colors', 'keys'], ({ colors, keys }) => {
            const getColor = getOrdinalColorScale(colors, 'key')

            return {
                colorById: keys.reduce((acc, key) => {

export default Component =>
    compose(
        defaultProps(SankeyDefaultProps),
        withState('currentNode', 'setCurrentNode', null),
        withState('currentLink', 'setCurrentLink', null),
        withTheme(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['colors'], ({ colors }) => ({
            getColor: getOrdinalColorScale(colors, 'id'),
            getLinkColor: getOrdinalColorScale(colors, 'source.id'),
        })),
        withPropsOnChange(['nodeBorderColor', 'theme'], ({ nodeBorderColor, theme }) => ({
            getNodeBorderColor: getInheritedColorGenerator(nodeBorderColor, theme),
        })),
        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
        })),
        withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
            getLabel: getLabelGenerator(label, labelFormat),
        })),
        withPropsOnChange(['sort'], ({ sort }) => {
            let sortFunction = sort
            if (sort === 'auto') {

export default Component =>
    compose(
        defaultProps(StreamDefaultProps),
        withTheme(),
        withCurve(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['curveInterpolator'], ({ curveInterpolator }) => ({
            areaGenerator: area()
                .x(({ x }) => x)
                .y0(({ y1 }) => y1)
                .y1(({ y2 }) => y2)
                .curve(curveInterpolator),
        })),
        withPropsOnChange(['colors'], ({ colors }) => ({
            getColor: getColorRange(colors),
        })),
        withPropsOnChange(['borderColor'], ({ borderColor }) => ({
            getBorderColor: getInheritedColorGenerator(borderColor),
        })),
        withPropsOnChange(['keys', 'offsetType', 'order'], ({ keys, offsetType, order }) => ({
            stack: d3Stack()
                .keys(keys)

export default Component =>
    compose(
        defaultProps(HeatMapDefaultProps),
        withState('currentNode', 'setCurrentNode', null),
        withTheme(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['colors'], ({ colors }) => ({
            colorScale: guessQuantizeColorScale(colors),
        })),
        withPropsOnChange(['indexBy'], ({ indexBy }) => ({
            getIndex: getAccessorFor(indexBy),
        })),
        withPropsOnChange(
            ['data', 'keys', 'width', 'height', 'padding', 'forceSquare'],
            ({ data, keys, width, height, padding, forceSquare }) => {
                const columns = keys.length
                const rows = data.length

                let cellWidth = Math.max((width - padding * (columns + 1)) / columns, 0)
                let cellHeight = Math.max((height - padding * (rows + 1)) / rows, 0)

                let offsetX = 0

export default Component =>
    compose(
        defaultProps(BarDefaultProps),
        withTheme(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['colors', 'colorBy'], ({ colors, colorBy }) => ({
            getColor: getOrdinalColorScale(colors, colorBy),
        })),
        withPropsOnChange(['indexBy'], ({ indexBy }) => ({
            getIndex: getAccessorFor(indexBy),
        })),
        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
        })),
        withPropsOnChange(['labelLinkColor', 'theme'], ({ labelLinkColor, theme }) => ({
            getLabelLinkColor: getInheritedColorGenerator(labelLinkColor, theme),
        })),
        withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
            getLabel: getLabelGenerator(label, labelFormat),
        })),
        withPropsOnChange(['borderColor', 'theme'], ({ borderColor, theme }) => ({