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

cornerRadius: 0,

    // border
    borderWidth: 1,
    borderColor: 'white',

    childColor: 'inherit',

    // interactivity
    isInteractive: true,
}

const enhance = compose(
    defaultProps(SunburstDefaultProps),
    withTheme(),
    withDimensions(),
    withColors(),
    withProps(({ width, height }) => {
        const radius = Math.min(width, height) / 2

        const partition = Partition().size([2 * Math.PI, radius * radius])

        return { radius, partition, centerX: width / 2, centerY: height / 2 }
    }),
    withPropsOnChange(['cornerRadius'], ({ cornerRadius }) => ({
        arcGenerator: arc()
            .startAngle(d => d.x0)
            .endAngle(d => d.x1)
            .innerRadius(d => Math.sqrt(d.y0))
            .outerRadius(d => Math.sqrt(d.y1))
            .cornerRadius(cornerRadius),
    })),

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

cornerRadius: 0,

    colors: { scheme: 'nivo' },
    borderWidth: 1,
    borderColor: 'white',

    childColor: { from: 'color' },

    isInteractive: true,
}

const enhance = compose(
    defaultProps(SunburstDefaultProps),
    withTheme(),
    withDimensions(),
    withPropsOnChange(['colors'], ({ colors }) => ({
        getColor: getOrdinalColorScale(colors, 'id'),
    })),
    withProps(({ width, height }) => {
        const radius = Math.min(width, height) / 2

        const partition = Partition().size([2 * Math.PI, radius * radius])

        return { radius, partition, centerX: width / 2, centerY: height / 2 }
    }),
    withPropsOnChange(['cornerRadius'], ({ cornerRadius }) => ({
        arcGenerator: arc()
            .startAngle(d => d.x0)
            .endAngle(d => d.x1)
            .innerRadius(d => Math.sqrt(d.y0))
            .outerRadius(d => Math.sqrt(d.y1))

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

const enhance = Component =>
    compose(
        defaultProps(PieDefaultProps),
        withTheme(),
        withDimensions(),
        withPropsOnChange(['radialLabel'], ({ radialLabel }) => ({
            getRadialLabel: getLabelGenerator(radialLabel),
        })),
        withPropsOnChange(['sliceLabel'], ({ sliceLabel }) => ({
            getSliceLabel: getLabelGenerator(sliceLabel),
        })),
        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: getOrdinalColorScale(colors, 'index'),
        })),
        withPropsOnChange(['borderColor', 'theme'], ({ borderColor, theme }) => ({
            getBorderColor: getInheritedColorGenerator(borderColor, theme),
        })),
        withPropsOnChange(['keys', 'offsetType', 'order'], ({ keys, offsetType, order }) => ({
            stack: d3Stack()

initialMinEdge={initialMinEdge}
            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 }) => {

export default Component =>
    compose(defaultProps(PieDefaultProps), withTheme(), withDimensions(), pure)(Component)

export default Component =>
    compose(defaultProps(VoronoiDefaultProps), withTheme(), withDimensions(), pure)(Component)

export default Component =>
    compose(
        defaultProps(PieDefaultProps),
        withTheme(),
        withDimensions(),
        /*
        withPropsOnChange(
            ['enhancedData', 'defs', 'fill'],
            ({ enhancedData: _enhancedData, defs, fill }) => {
                const enhancedData = _enhancedData.map(datum => ({ ...datum }))
                const boundDefs = bindDefs(defs, enhancedData, fill)

                return {
                    enhancedData,
                    boundDefs,
                    legendData: enhancedData.map(datum => ({
                        label: datum.label,
                        fill: datum.fill || datum.color,
                    })),
                }
            }