diff --git a/packages/bump/src/bump/Point.js b/packages/bump/src/bump/Point.js
index 1b65dcae3f..83b8883000 100644
--- a/packages/bump/src/bump/Point.js
+++ b/packages/bump/src/bump/Point.js
@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated, to } from 'react-spring'
 import { useMotionConfig } from '@nivo/core'
 
 const pointStyle = { pointerEvents: 'none' }
@@ -30,7 +30,7 @@ const Point = ({ x, y, size, color, borderColor, borderWidth }) => {
         <animated.circle
             cx={animatedProps.x}
             cy={animatedProps.y}
-            r={animatedProps.radius.interpolate(v => Math.max(v, 0))}
+            r={to(animatedProps.radius, v => Math.max(v, 0))}
             fill={animatedProps.color}
             strokeWidth={animatedProps.borderWidth}
             stroke={borderColor}
diff --git a/packages/core/src/hooks/useAnimatedPath.js b/packages/core/src/hooks/useAnimatedPath.js
index 24bbb09f0d..a7c85187f6 100644
--- a/packages/core/src/hooks/useAnimatedPath.js
+++ b/packages/core/src/hooks/useAnimatedPath.js
@@ -1,7 +1,7 @@
 import { interpolateString } from 'd3-interpolate'
 import { useEffect, useMemo, useRef } from 'react'
+import { useSpring, to } from 'react-spring'
 import { useMotionConfig } from '../motion'
-import { useSpring } from 'react-spring'
 
 const usePrevious = value => {
     const ref = useRef()
@@ -27,5 +27,5 @@ export const useAnimatedPath = path => {
         immediate: !animate,
     })
 
-    return value.interpolate(interpolator)
+    return to(value, interpolator)
 }
diff --git a/packages/radar/src/RadarGridLevels.js b/packages/radar/src/RadarGridLevels.js
index 2ad4b582ae..1ed349278a 100644
--- a/packages/radar/src/RadarGridLevels.js
+++ b/packages/radar/src/RadarGridLevels.js
@@ -9,7 +9,7 @@
 import React, { memo, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { lineRadial, curveLinearClosed } from 'd3-shape'
-import { animated, useSpring } from 'react-spring'
+import { animated, useSpring, to } from 'react-spring'
 import { useTheme, useAnimatedPath, useMotionConfig } from '@nivo/core'
 
 const RadarGridLevelCircular = memo(({ radius }) => {
@@ -25,7 +25,7 @@ const RadarGridLevelCircular = memo(({ radius }) => {
     return (
         <animated.circle
             fill="none"
-            r={animatedProps.radius.interpolate(value => Math.max(value, 0))}
+            r={to(animatedProps.radius, value => Math.max(value, 0))}
             {...theme.grid.line}
         />
     )
diff --git a/packages/sankey/src/SankeyNodesItem.js b/packages/sankey/src/SankeyNodesItem.js
index b2e36e2f18..b0ad6d3c32 100644
--- a/packages/sankey/src/SankeyNodesItem.js
+++ b/packages/sankey/src/SankeyNodesItem.js
@@ -8,7 +8,7 @@
  */
 import React, { memo, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated, to } from 'react-spring'
 import { useMotionConfig } from '@nivo/core'
 import { BasicTooltip, useTooltip } from '@nivo/tooltip'
 
@@ -80,8 +80,8 @@ const SankeyNodesItem = ({
         <animated.rect
             x={animatedProps.x}
             y={animatedProps.y}
-            width={animatedProps.width.interpolate(v => Math.max(v, 0))}
-            height={animatedProps.height.interpolate(v => Math.max(v, 0))}
+            width={to(animatedProps.width, v => Math.max(v, 0))}
+            height={to(animatedProps.height, v => Math.max(v, 0))}
             fill={animatedProps.color}
             fillOpacity={animatedProps.opacity}
             strokeWidth={borderWidth}
diff --git a/packages/treemap/src/TreeMapNode.js b/packages/treemap/src/TreeMapNode.js
index 8e52c206aa..2ecf4684ec 100644
--- a/packages/treemap/src/TreeMapNode.js
+++ b/packages/treemap/src/TreeMapNode.js
@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { animated } from 'react-spring'
+import { animated, to } from 'react-spring'
 import { useTheme } from '@nivo/core'
 
 const TreeMapNode = ({
@@ -31,8 +31,8 @@ const TreeMapNode = ({
     return (
         <animated.g transform={animatedProps.transform}>
             <animated.rect
-                width={animatedProps.width.interpolate(v => Math.max(v, 0))}
-                height={animatedProps.height.interpolate(v => Math.max(v, 0))}
+                width={to(animatedProps.width, v => Math.max(v, 0))}
+                height={to(animatedProps.height, v => Math.max(v, 0))}
                 fill={node.fill ? node.fill : animatedProps.color}
                 strokeWidth={borderWidth}
                 stroke={node.borderColor}