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

unknownColor,
        borderWidth,
        borderColor,
        enableGraticule,
        graticuleLineWidth,
        graticuleLineColor,
        layers,
        legends,
        isInteractive,
        onClick,
        onMouseMove,
        tooltip: Tooltip,
    }) => {
        const canvasEl = useRef(null)
        const theme = useTheme()
        const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
        const { projection, graticule, path, getBorderWidth, getBorderColor } = useGeoMap({
            width,
            height,
            projectionType,
            projectionScale,
            projectionTranslation,
            projectionRotation,
            fillColor: () => {},
            borderWidth,
            borderColor,
        })
        const { getFillColor, boundFeatures, legendData } = useChoropleth({
            features,
            data,
            match,
            label,

annotations,

        isInteractive,
        useMesh,
        debugMesh,
        onMouseEnter,
        onMouseMove,
        onMouseLeave,
        onClick,
        tooltip,

        animate,
        motionStiffness,
        motionDamping,
    }) => {
        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,

isInteractive,
        debugMesh,
        onMouseEnter,
        onMouseMove,
        onMouseLeave,
        onClick,
        tooltip,

        legends,
    } = props

    const canvasEl = useRef(null)
    const theme = useTheme()
    const [currentNode, setCurrentNode] = useState(null)

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

    const { xScale, yScale, nodes, legendData } = useScatterPlot({
        data,
        xScaleSpec,
        xFormat,
        yScaleSpec,
        yFormat,
        width: innerWidth,
        height: innerHeight,
        nodeSize,
        colors,
    })

repulsivity,
        distanceMin,
        distanceMax,
        iterations,

        layers,

        nodeColor,
        nodeBorderWidth,
        nodeBorderColor,

        linkThickness,
        linkColor,
    } = props

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

    const { animate } = useMotionConfig()
    const theme = useTheme()
    const getColor = useNodeColor(nodeColor)
    const getBorderColor = useInheritedColor(nodeBorderColor, theme)
    const getLinkThickness = useLinkThickness(linkThickness)
    const getLinkColor = useInheritedColor(linkColor, theme)

    const [nodes, links] = useNetwork({
        nodes: rawNodes,
        links: rawLinks,
        linkDistance,

projectionRotation,
        colors,
        domain,
        unknownColor,
        borderWidth,
        borderColor,
        enableGraticule,
        graticuleLineWidth,
        graticuleLineColor,
        layers,
        legends,
        isInteractive,
        onClick,
        tooltip: Tooltip,
    }) => {
        const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
        const { graticule, path, getBorderWidth, getBorderColor } = useGeoMap({
            width,
            height,
            projectionType,
            projectionScale,
            projectionTranslation,
            projectionRotation,
            fillColor: () => {},
            borderWidth,
            borderColor,
        })
        const { getFillColor, boundFeatures, legendData } = useChoropleth({
            features,
            data,
            match,
            label,

axisTop,
        axisRight,
        axisBottom,
        axisLeft,
        enableGridX,
        enableGridY,

        isInteractive,
        onMouseEnter,
        onMouseMove,
        onMouseLeave,
        onClick,
        tooltip,
    } = props

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

    const [currentSerie, setCurrentSerie] = useState(null)

    const { series, points, xScale, yScale, lineGenerator } = useBump({
        width: innerWidth,
        height: innerHeight,
        data,
        interpolation,
        xPadding,
        xOuterPadding,
        yOuterPadding,
        lineWidth,

borderWidth,
        borderColor,

        enableGraticule,
        graticuleLineWidth,
        graticuleLineColor,

        isInteractive,
        onClick,
        onMouseMove,
        tooltip: Tooltip,
    } = props

    const canvasEl = useRef(null)
    const theme = useTheme()
    const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
    const { projection, graticule, path, getFillColor, getBorderWidth, getBorderColor } = useGeoMap(
        {
            width,
            height,
            projectionType,
            projectionScale,
            projectionTranslation,
            projectionRotation,
            fillColor,
            borderWidth,
            borderColor,
        }
    )

    useEffect(() => {
        if (!canvasEl) return

const BumpChart = ({ margin: partialMargin, width, height, tools }) => {
    const { getName } = useEntities()

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

    const { xScale, yScale } = useScales({
        width: innerWidth,
        height: innerHeight,
        tools
    })
    const linePadding = xScale.step() * 0.2

    const lineGenerator = useLineGenerator()

    const toolsWithPoints = useMemo(
        () =>

dotBorderColor,
        enableDotLabel,
        dotLabel,
        dotLabelFormat,
        dotLabelYOffset,
        colors,
        fillOpacity,
        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]
        )

isInteractive,
        useMesh,
        debugMesh,
        onMouseEnter,
        onMouseMove,
        onMouseLeave,
        onClick,
        tooltip,

        markers,

        legends,
    } = props

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

    const theme = useTheme()
    const { animate } = useMotionConfig()

    const { xScale, yScale, nodes, legendData } = useScatterPlot({
        data,
        xScaleSpec,
        xFormat,
        yScaleSpec,
        yFormat,
        width: innerWidth,
        height: innerHeight,