How to use the recompose/withPropsOnChange function in recompose

? Math.min(
            headersReversed[currentHeaderIdx - 1].lineNumber * rowHeight - scrollTop - rowHeight,
            0
          )
        : 0;

      return {
        offset,
        currentHeader: headersReversed[currentHeaderIdx] || {
          href: '',
          content: '',
        },
      };
    }
  ),
  withPropsOnChange(
    ['offset'],
    ({ offset, rowHeight }) => ({
      posStyle: {
        top: offset,
        height: rowHeight,
        paddingRight: scrollbarSize(), // memoized in lib
      },
    })
  ),
  // omit scrollParams
  mapProps(({ scrollParams, ...props }) => props), // eslint-disable-line
  pure
);

export default toClass(fileHeadersHOC(fileHeaders));

onMouseLeave={hideTooltip}
    />
)

SunburstArc.propTypes = {
    node: PropTypes.shape({}).isRequired,
    arcGenerator: PropTypes.func.isRequired,
    borderWidth: PropTypes.number.isRequired,
    borderColor: PropTypes.string.isRequired,
    showTooltip: PropTypes.func.isRequired,
    hideTooltip: PropTypes.func.isRequired,
    theme: PropTypes.object.isRequired,
}

const enhance = compose(
    withPropsOnChange(['node', 'arcGenerator'], ({ node, arcGenerator }) => ({
        path: arcGenerator(node),
    })),
    withPropsOnChange(['node', 'showTooltip', 'theme'], ({ node, showTooltip, theme }) => ({
        showTooltip: e => {
            showTooltip(
                ,
                e
            )
        },
    })),

['sizeVariation', 'minValue', 'maxValue'],
            ({ sizeVariation, minValue, maxValue }) => {
                let sizeScale
                if (sizeVariation > 0) {
                    sizeScale = scaleLinear()
                        .range([1 - sizeVariation, 1])
                        .domain([minValue, maxValue])
                }

                return { sizeScale }
            }
        ),
        withPropsOnChange(['cellBorderColor', 'theme'], ({ cellBorderColor, theme }) => ({
            getCellBorderColor: getInheritedColorGenerator(cellBorderColor, theme),
        })),
        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
        })),
        pure
    )(Component)

export default () =>
    compose(
        setPropTypes(motionPropTypes),
        defaultProps({
            animate: defaultAnimate,
            motionDamping: defaultMotionDamping,
            motionStiffness: defaultMotionStiffness,
        }),
        withPropsOnChange(
            ['motionDamping', 'motionStiffness'],
            ({ motionDamping, motionStiffness }) => ({
                boundSpring: partialRight(spring, {
                    damping: motionDamping,
                    stiffness: motionStiffness,
                }),
            })
        )
    )

.outerRadius(d => Math.sqrt(d.y1))
            .cornerRadius(cornerRadius),
    })),
    withPropsOnChange(['identity'], ({ identity }) => ({
        getIdentity: getAccessorFor(identity),
    })),
    withPropsOnChange(['value'], ({ value }) => ({
        getValue: getAccessorFor(value),
    })),
    withPropsOnChange(['data', 'getValue'], ({ data, getValue }) => ({
        data: hierarchy(data).sum(getValue),
    })),
    withPropsOnChange(['childColor'], ({ childColor }) => ({
        getChildColor: getInheritedColorGenerator(childColor),
    })),
    withPropsOnChange(
        ['data', 'partition', 'getIdentity', 'getChildColor'],
        ({ data, partition, getIdentity, getColor, getChildColor }) => {
            const total = data.value

            const nodes = sortBy(partition(cloneDeep(data)).descendants(), 'depth')
            nodes.forEach(node => {
                const ancestor = getAncestor(node).data

                delete node.children
                delete node.data.children

                Object.assign(node.data, {
                    id: getIdentity(node.data),
                    value: node.value,
                    percentage: 100 * node.value / total,
                    depth: node.depth,

onBrush: ({ update, invertScale, xRange, data }) => (minEdge, maxEdge) => {
      this.minEdge = indexOf(xRange, invertScale(minEdge));
      this.maxEdge = indexOf(xRange, invertScale(maxEdge));
      requestAnimationFrame(update);
    }
  }),
  withPropsOnChange(['innerWidth'], ({ innerWidth }) => ({
    maxPoints: Math.round(innerWidth / POINTS_PER_WIDTH)
  })),
  withPropsOnChange(['data', 'min', 'max'], ({ data, min, max }) => ({
    visibleData: data.map(d => ({
      ...d,
      ...{ data: d.data.slice(min, max) }
    }))
  })),
  withPropsOnChange(['visibleData'], ({ visibleData, maxPoints }) => ({
    drawData: visibleData.map(d => {
      if (d.data.length < maxPoints) return d;

      var filterEvery = Math.ceil(d.data.length / maxPoints);

      return {
        ...d,
        ...{ data: d.data.filter((_, i) => i % filterEvery === 0) }
      };
    })
  })),
  withPropsOnChange(['data'], ({ data, maxPoints }) => ({
    brushData: data.map(d => {
      if (d.data.length < maxPoints) return d;

      var filterEvery = Math.ceil(d.data.length / maxPoints);

}

const enhance = compose(
    withPropsOnChange(['node', 'theme', 'tooltip'], ({ node, theme, tooltip }) => {
        if (tooltip) {
            return {
                tooltip: ,
            }
        }
        return {
            tooltip: (
                
            ),
        }
    }),
    withPropsOnChange(['onClick', 'node'], ({ onClick, node }) => ({
        onClick: event => onClick(node, event),
    })),
    withHandlers({
        handleMouseEnter: ({ showTooltip, setCurrent, node, tooltip }) => e => {
            setCurrent(node)
            showTooltip(tooltip, e)
        },
        handleMouseMove: ({ showTooltip, tooltip }) => e => {
            showTooltip(tooltip, e)
        },
        handleMouseLeave: ({ hideTooltip, setCurrent }) => () => {
            setCurrent(null)
            hideTooltip()
        },
    }),
    pure

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(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)
                .offset(stackOffsetFromProp(offsetType))

onMouseLeave: PropTypes.func,
    tooltip: PropTypes.element.isRequired,

    theme: PropTypes.shape({
        tooltip: PropTypes.shape({}).isRequired,
        labels: PropTypes.shape({
            text: PropTypes.object.isRequired,
        }).isRequired,
    }).isRequired,
}

const enhance = compose(
    withPropsOnChange(['data', 'color', 'onClick'], ({ data, color, onClick }) => ({
        onClick: event => onClick({ color, ...data }, event),
    })),
    withPropsOnChange(
        ['data', 'color', 'theme', 'tooltip', 'getTooltipLabel', 'tooltipFormat'],
        ({ data, color, theme, tooltip, getTooltipLabel, tooltipFormat }) => ({
            tooltip: (