diff --git a/packages/circle-packing/package.json b/packages/circle-packing/package.json
index 65629ca650..1e497e46d6 100644
--- a/packages/circle-packing/package.json
+++ b/packages/circle-packing/package.json
@@ -33,9 +33,7 @@
     "@nivo/tooltip": "0.68.0",
     "d3-hierarchy": "^1.1.8",
     "lodash": "^4.17.11",
-    "react-motion": "^0.5.2",
-    "react-spring": "9.0.0-rc.3",
-    "recompose": "^0.30.0"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.68.0",
diff --git a/packages/circle-packing/src/CirclePacking.tsx b/packages/circle-packing/src/CirclePacking.tsx
index 98ca29d81a..0f5cbfd7d0 100644
--- a/packages/circle-packing/src/CirclePacking.tsx
+++ b/packages/circle-packing/src/CirclePacking.tsx
@@ -139,8 +139,8 @@ const InnerCirclePacking = <RawDatum,>({
             role={role}
         >
             {layers.map((layer, i) => {
-                if (layerById[layer as CirclePackLayerId] !== undefined) {
-                    return layerById[layer as CirclePackLayerId]
+                if (layerById[layer as CirclePackingLayerId] !== undefined) {
+                    return layerById[layer as CirclePackingLayerId]
                 }
 
                 if (typeof layer === 'function') {
@@ -154,10 +154,10 @@ const InnerCirclePacking = <RawDatum,>({
 }
 
 export const CirclePacking = <RawDatum,>({
+    theme,
     isInteractive = defaultProps.isInteractive,
     animate = defaultProps.animate,
     motionConfig = defaultProps.motionConfig,
-    theme,
     ...otherProps
 }: Partial<Omit<CirclePackingSvgProps<RawDatum>, 'data' | 'width' | 'height'>> &
     Pick<CirclePackingSvgProps<RawDatum>, 'data' | 'width' | 'height'>) => (
diff --git a/packages/circle-packing/src/Circles.tsx b/packages/circle-packing/src/Circles.tsx
index 9972031b70..437f8aeedd 100644
--- a/packages/circle-packing/src/Circles.tsx
+++ b/packages/circle-packing/src/Circles.tsx
@@ -120,7 +120,7 @@ export const Circles = <RawDatum,>({
             opacity: number
         }
     >(nodes, {
-        key: node => node.id,
+        keys: node => node.id,
         initial: transitionPhases.update,
         from: transitionPhases.enter,
         enter: transitionPhases.update,
@@ -147,6 +147,6 @@ export const Circles = <RawDatum,>({
                     onClick: handleClick,
                 })
             })}
-        </g>
+        </>
     )
 }
diff --git a/packages/circle-packing/src/Labels.tsx b/packages/circle-packing/src/Labels.tsx
index b5cb051d1b..ff780c1e3c 100644
--- a/packages/circle-packing/src/Labels.tsx
+++ b/packages/circle-packing/src/Labels.tsx
@@ -68,7 +68,7 @@ export const Labels = <RawDatum,>({
             opacity: number
         }
     >(labels, {
-        key: label => label.node.id,
+        keys: label => label.node.id,
         initial: transitionPhases.update,
         from: transitionPhases.enter,
         enter: transitionPhases.update,
diff --git a/packages/circle-packing/src/ResponsiveBubbleHtml.js b/packages/circle-packing/src/ResponsiveBubbleHtml.js
deleted file mode 100644
index 53381efc06..0000000000
--- a/packages/circle-packing/src/ResponsiveBubbleHtml.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { ResponsiveWrapper } from '@nivo/core'
-import BubbleHtml from './BubbleHtml'
-
-const ResponsiveBubbleHtml = props => (
-    <ResponsiveWrapper>
-        {({ width, height }) => <BubbleHtml width={width} height={height} {...props} />}
-    </ResponsiveWrapper>
-)
-
-export default ResponsiveBubbleHtml
diff --git a/packages/circle-packing/src/ResponsiveCirclePacking.tsx b/packages/circle-packing/src/ResponsiveCirclePacking.tsx
index ab2ece24f5..91fe4afdb9 100644
--- a/packages/circle-packing/src/ResponsiveCirclePacking.tsx
+++ b/packages/circle-packing/src/ResponsiveCirclePacking.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
+import { CirclePackingSvgProps } from './types'
 import { CirclePacking } from './CirclePacking'
-import { CirclePackSvgProps } from './types'
 
 type ResponsiveCirclePackingProps<RawDatum> = Partial<
     Omit<CirclePackingSvgProps<RawDatum>, 'data' | 'width' | 'height'>
diff --git a/packages/circle-packing/src/hooks.ts b/packages/circle-packing/src/hooks.ts
index d42181e4cf..42ab46481c 100644
--- a/packages/circle-packing/src/hooks.ts
+++ b/packages/circle-packing/src/hooks.ts
@@ -17,10 +17,11 @@ import {
     MouseHandlers,
 } from './types'
 
-export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
+export const useCirclePacking = <RawDatum>({
     data,
     id,
     value,
+    valueFormat,
     width,
     height,
     padding,
@@ -30,9 +31,10 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
     inheritColorFromParent,
     childColor,
 }: {
-    data: RawDatum
-    id: CirclePackSvgProps<RawDatum>['id']
-    value: CirclePackSvgProps<RawDatum>['value']
+    data: CirclePackingCommonProps<RawDatum>['data']
+    id: CirclePackingCommonProps<RawDatum>['id']
+    value: CirclePackingCommonProps<RawDatum>['value']
+    valueFormat?: CirclePackingCommonProps<RawDatum>['valueFormat']
     width: number
     height: number
     padding: CirclePackingCommonProps<RawDatum>['padding']
@@ -44,6 +46,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
 }): ComputedDatum<RawDatum>[] => {
     const getId = usePropertyAccessor<RawDatum, string>(id)
     const getValue = usePropertyAccessor<RawDatum, number>(value)
+    const formatValue = useValueFormatter(valueFormat)
 
     const getColor = useOrdinalColorScale<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>(
         colors,
@@ -57,10 +60,9 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
     // this ensures that we don't mutate the input data
     const clonedData = cloneDeep(data)
 
-    const hierarchy = d3Hierarchy(clonedData).sum(getValue)
-
-    const pack = d3Pack().size([width, height]).padding(padding)
+    const hierarchy = d3Hierarchy<RawDatum>(clonedData).sum(getValue)
 
+    const pack = d3Pack<RawDatum>().size([width, height]).padding(padding)
     const packedData = pack(hierarchy)
 
     const nodes = leavesOnly ? packedData.leaves() : packedData.descendants()
@@ -73,7 +75,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
 
     const total = hierarchy.value ?? 0
 
-    const computedNodes = sortedNodes.reduce<ComputedDatum<RawDatum>>((acc, descendant) => {
+    const computedNodes = sortedNodes.reduce<ComputedDatum<RawDatum>[]>((acc, descendant) => {
         const id = getId(descendant.data)
         const value = descendant.value!
         const percentage = (100 * value) / total
@@ -89,7 +91,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
             path,
             value,
             percentage,
-            //formattedValue: valueFormat ? formatValue(value) : `${percentage.toFixed(2)}%`,
+            formattedValue: valueFormat ? formatValue(value) : `${percentage.toFixed(2)}%`,
             x: descendant.x,
             y: descendant.y,
             radius: descendant.r,
diff --git a/packages/circle-packing/src/types.ts b/packages/circle-packing/src/types.ts
index 35f2184efc..92e4808a24 100644
--- a/packages/circle-packing/src/types.ts
+++ b/packages/circle-packing/src/types.ts
@@ -30,13 +30,15 @@ export interface ComputedDatum<RawDatum> {
     parent?: ComputedDatum<RawDatum>
 }
 
-export type CirclePackLayerId = 'circles' | 'labels'
+export type CirclePackingLayerId = 'circles' | 'labels'
 
-export interface CirclePackCustomLayerProps<RawDatum extends DatumWithChildren<RawDatum>> {}
+export interface CirclePackingCustomLayerProps<RawDatum> {
+    nodes: ComputedDatum<RawDatum>[]
+}
 
-export type CirclePackCustomLayer<RawDatum> = React.FC<CirclePackCustomLayerProps<RawDatum>>
+export type CirclePackingCustomLayer<RawDatum> = React.FC<CirclePackingCustomLayerProps<RawDatum>>
 
-export type CirclePackLayer<RawDatum> = CirclePackLayerId | CirclePackCustomLayer<RawDatum>
+export type CirclePackingLayer<RawDatum> = CirclePackingLayerId | CirclePackingCustomLayer<RawDatum>
 
 export type MouseHandler<RawDatum> = (
     datum: ComputedDatum<RawDatum>,