diff --git a/app/client/package.json b/app/client/package.json
index 49964b784c..34a269370b 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -124,7 +124,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "4.0.1",
     "react-select": "^3.0.8",
-    "react-spring": "^8.0.27",
+    "react-spring": "^9.4.0",
     "react-syntax-highlighter": "^15.4.4",
     "react-table": "^7.0.0",
     "react-tabs": "^3.0.0",
@@ -301,4 +301,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/client/src/comments/AppComments/AppCommentThreadsContainer.tsx b/app/client/src/comments/AppComments/AppCommentThreadsContainer.tsx
index 9bb8b2a762..3ed81bcabb 100644
--- a/app/client/src/comments/AppComments/AppCommentThreadsContainer.tsx
+++ b/app/client/src/comments/AppComments/AppCommentThreadsContainer.tsx
@@ -29,7 +29,7 @@ function AppCommentThreadsContainer({ isOpen }: Props) {
   }, [isOpen]);
 
   return (
-    <Container style={{ height: springHeight.height as number }}>
+    <Container style={{ height: springHeight.height }}>
       <AppCommentThreads />
     </Container>
   );
diff --git a/app/client/src/components/ads/DraggableList.tsx b/app/client/src/components/ads/DraggableList.tsx
index 6005e71e4d..a22cb86a61 100644
--- a/app/client/src/components/ads/DraggableList.tsx
+++ b/app/client/src/components/ads/DraggableList.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { clamp } from "lodash-es";
 import swap from "lodash-move";
 import { useDrag } from "react-use-gesture";
-import { useSprings, animated, interpolate } from "react-spring";
+import { useSprings, animated, to } from "react-spring";
 import styled from "styled-components";
 import { debounce, get } from "lodash";
 
@@ -132,7 +132,7 @@ function DraggableList(props: any) {
           style={{
             zIndex,
             width: "100%",
-            transform: interpolate(
+            transform: to(
               [y, scale],
               (y, s) => `translate3d(0,${y}px,0) scale(${s})`,
             ),
diff --git a/app/client/src/components/ads/ScrollIndicator.tsx b/app/client/src/components/ads/ScrollIndicator.tsx
index 7ffc3fafef..da64dd948e 100644
--- a/app/client/src/components/ads/ScrollIndicator.tsx
+++ b/app/client/src/components/ads/ScrollIndicator.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import styled from "styled-components";
 import _ from "lodash";
-import { animated } from "react-spring";
-import { useSpring, interpolate } from "react-spring";
+import { animated, useSpring, to } from "react-spring";
 
 export const ScrollThumb = styled(animated.div)<{
   mode?: "DARK" | "LIGHT";
@@ -125,7 +124,7 @@ function ScrollIndicator({
       <ScrollThumb
         ref={thumbRef}
         style={{
-          transform: interpolate(
+          transform: to(
             [thumbPosition],
             (top: number) => `translate3d(0px, ${top}%, 0)`,
           ),
diff --git a/app/client/src/components/ads/ShowcaseCarousel.tsx b/app/client/src/components/ads/ShowcaseCarousel.tsx
index 765b5022cb..0b649e91e0 100644
--- a/app/client/src/components/ads/ShowcaseCarousel.tsx
+++ b/app/client/src/components/ads/ShowcaseCarousel.tsx
@@ -98,7 +98,7 @@ export default function ShowcaseCarousel(props: Props) {
     setCurrentIdx(props.activeIndex);
   }, [props.activeIndex]);
 
-  const transition = useTransition("key", null, {
+  const transition = useTransition("key", {
     from: { transform: "translateY(+2%)" },
     enter: { transform: "translateY(0%)" },
     leave: { transform: "translateY(0%)" },
@@ -132,13 +132,11 @@ export default function ShowcaseCarousel(props: Props) {
 
   return (
     <Container onKeyDown={handleKeyDown} tabIndex={0}>
-      {transition.map(
-        ({ item, props: springProps }: { item: string; props: any }) => (
-          <animated.div key={item} style={springProps}>
-            <ContentComponent {...componentProps} />
-          </animated.div>
-        ),
-      )}
+      {transition((styles, item) => (
+        <animated.div key={item} style={styles}>
+          <ContentComponent {...componentProps} />
+        </animated.div>
+      ))}
       <Footer>
         <Dots
           activeIndex={activeIndex}
diff --git a/app/client/src/resizable/resize/index.tsx b/app/client/src/resizable/resize/index.tsx
index 501759f5b6..8f7e55827b 100644
--- a/app/client/src/resizable/resize/index.tsx
+++ b/app/client/src/resizable/resize/index.tsx
@@ -1,12 +1,12 @@
 import React, { ReactNode, useState, useEffect, forwardRef, Ref } from "react";
 import styled, { StyledComponent } from "styled-components";
 import { useDrag } from "react-use-gesture";
-import { Spring } from "react-spring/renderprops";
+import { Spring, animated } from "react-spring";
 import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
 
-const ResizeWrapper = styled.div<{ prevents: boolean }>`
+const ResizeWrapper = styled(animated.div)<{ prevents: boolean }>`
   display: block;
   & {
     * {
diff --git a/app/client/src/resizable/resizenreflow/index.tsx b/app/client/src/resizable/resizenreflow/index.tsx
index 30be756316..f3077d32ac 100644
--- a/app/client/src/resizable/resizenreflow/index.tsx
+++ b/app/client/src/resizable/resizenreflow/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode, useState, useEffect, useRef, useMemo } from "react";
 import styled, { StyledComponent } from "styled-components";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
 import { useDrag } from "react-use-gesture";
-import { Spring } from "react-spring/renderprops";
+import { animated, Spring } from "react-spring";
 import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
@@ -18,7 +18,7 @@ import { getNearestParentCanvas } from "utils/generators";
 import { getOccupiedSpaces } from "selectors/editorSelectors";
 import { isDropZoneOccupied } from "utils/WidgetPropsUtils";
 
-const ResizeWrapper = styled.div<{ prevents: boolean }>`
+const ResizeWrapper = styled(animated.div)<{ prevents: boolean }>`
   display: block;
   & {
     * {
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 293e88d71f..a0f13e0d5e 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -2374,6 +2374,92 @@
   version "2.9.2"
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz"
 
+"@react-spring/animated@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.1.tgz#6b5e57725408ba8347f098a5111a9fb4de74a81b"
+  integrity sha512-uAJkcrSlpg8uSe8zy7eJcDdNpI5QvRXrZUKhn5dlGAPk3psgY5qj6pahzB0k5NZZQ27ls8Z5Nt4VKhGaXPJNDQ==
+  dependencies:
+    "@react-spring/shared" "~9.4.0"
+    "@react-spring/types" "~9.4.0"
+
+"@react-spring/core@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.1.tgz#0658611dd961d745ac9cfc9dde5e86f2895e182a"
+  integrity sha512-sXQmGg4wNeyoVZ/LdEF01xtzQKZtLIyFDX03hoa0oa9VTgLNTVSbVXD9q2xsH8HtWpY4OFPTi/9Noi93gjnYyg==
+  dependencies:
+    "@react-spring/animated" "~9.4.0"
+    "@react-spring/rafz" "~9.4.0"
+    "@react-spring/shared" "~9.4.0"
+    "@react-spring/types" "~9.4.0"
+
+"@react-spring/konva@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.4.1.tgz#0621e5a65a438574285f627fd2c34298e422d372"
+  integrity sha512-rDn72jVTOyVbRcg5SEQmbUIPxKXSx3HlRS8sGHgJ6r2IUgmaVVqWApFLoUSoIYW+WF/TnhSUvpEoYWFfOiQ+5g==
+  dependencies:
+    "@react-spring/animated" "~9.4.0"
+    "@react-spring/core" "~9.4.0"
+    "@react-spring/shared" "~9.4.0"
+    "@react-spring/types" "~9.4.0"
+
+"@react-spring/native@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.4.1.tgz#c02fcfb95d35aeefff94559076edbc8f70aaeecc"
+  integrity sha512-RCRemg8XWIK+m4S3/Upu26Jr0caSSU2As2RTvVMKwInZnW+CkZoJNjQSSoUnq9MfC7DvvS+7MCu8PJRiy2/cvQ==
+  dependencies:
+    "@react-spring/animated" "~9.4.0"
+    "@react-spring/core" "~9.4.0"
+    "@react-spring/shared" "~9.4.0"
+    "@react-spring/types" "~9.4.0"
+
+"@react-spring/rafz@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.1.tgz#66ed8eadf5c1784d89b210f443fd2ec9fdb59fb6"
+  integrity sha512-R/mNOQ4axraWsL/jwzoaqfeX6RwUODg3WOGweL8zYbHHheRqQV+QwnhGmDATepBZ1H3UUulhXvOqkzWzjnpuQQ==
+
+"@react-spring/shared@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.1.tgz#6c688cbe093ada7f6cd8ed2b9d28a807b6665ede"
+  integrity sha512-7atTQOhEQmw5UEYbb5yk7YEaf11AcRF7UISfAmr9FJ2FJD4VUVCn1R4V78omiFiRvnU6qI3GRhkRnIvYM8aAZw==
+  dependencies:
+    "@react-spring/rafz" "~9.4.0"
+    "@react-spring/types" "~9.4.0"
+
+"@react-spring/three@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.4.1.tgz#c2c659c0eda847522dc0e5039c63a97c355ac805"
+  integrity sha512-TQiR/yzQfoueiIjak5XHE4mHdJOI9rntfpqEtwF0B2hfpeyw/XNl7nMbbY66UGoKLLVGH2YAjqvMAt3Cx4QKuA==
+  dependencies:
+    "@react-spring/animated" "~9.4.0"
+    "@react-spring/core" "~9.4.0"
+    "@react-spring/shared" "~9.4.0"
+    "@react-spring/types" "~9.4.0"
+
+"@react-spring/types@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.1.tgz#93a203e5b922362e6643b95aff0989dd1a33b77b"
+  integrity sha512-eZmlFRc+XkY/HJi4RswLkIHH0nKQkqKRHPUqnseffcBuZ5FNXKDUmNnLUpqkrCpl746QCFVQtI5QptLklDATfQ==
+
+"@react-spring/web@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.1.tgz#dd8560af6834a9c41cd7061bc98721e9f64a8557"
+  integrity sha512-ajlGJl0Zqa3idhZw0KL5chP8AIn4wPHpDY7WjtWaWjVZSZRSBAeHmfqNLtAGCjazeO/Q6zmt6wdGs8bX8q42rQ==
+  dependencies:
+    "@react-spring/animated" "~9.4.0"
+    "@react-spring/core" "~9.4.0"
+    "@react-spring/shared" "~9.4.0"
+    "@react-spring/types" "~9.4.0"
+
+"@react-spring/zdog@~9.4.0":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.4.1.tgz#6dcb358e1314d46dcd3e58ac8ebba057908103ee"
+  integrity sha512-fd/BWVukp5MYb5izEgt9BRgLWtpiuAh7vl+mjxozqyIFSMs7Uv+uB2sioHh/FrlC9bB44h72vXXx94wSfqZS0g==
+  dependencies:
+    "@react-spring/animated" "~9.4.0"
+    "@react-spring/core" "~9.4.0"
+    "@react-spring/shared" "~9.4.0"
+    "@react-spring/types" "~9.4.0"
+
 "@redux-saga/core@^1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz"
@@ -3237,7 +3323,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.2":
+"@types/react@*":
   version "16.9.52"
   resolved "https://registry.npmjs.org/@types/react/-/react-16.9.52.tgz"
   dependencies:
@@ -3260,6 +3346,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^16.8.2":
+  version "16.14.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
+  integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/redux-form@^8.1.9":
   version "8.3.0"
   resolved "https://registry.npmjs.org/@types/redux-form/-/redux-form-8.3.0.tgz"
@@ -14218,12 +14313,17 @@ react-side-effect@^1.1.0:
   dependencies:
     shallowequal "^1.0.1"
 
-react-spring@^8.0.27:
-  version "8.0.27"
-  resolved "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz"
+react-spring@^9.4.0:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.4.1.tgz#7d17fdbcc527eb89ce9a642c86ec4e91cfee5909"
+  integrity sha512-1RO7FUpBFrnM2vhiaMyuzpi0YnAsCPpFdzAZtCCGsRKgNYLg28xE1J5vWk/GNoKhvpQePEuK6j9DLoDg9vDZbw==
   dependencies:
-    "@babel/runtime" "^7.3.1"
-    prop-types "^15.5.8"
+    "@react-spring/core" "~9.4.0"
+    "@react-spring/konva" "~9.4.0"
+    "@react-spring/native" "~9.4.0"
+    "@react-spring/three" "~9.4.0"
+    "@react-spring/web" "~9.4.0"
+    "@react-spring/zdog" "~9.4.0"
 
 react-syntax-highlighter@^15.4.4:
   version "15.4.4"