diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json
index 9e69cc4f1afd..8f7f8eac1e27 100644
--- a/airbyte-webapp/package-lock.json
+++ b/airbyte-webapp/package-lock.json
@@ -32,7 +32,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-helmet": "6.1.0",
-        "react-intl": "^5.24.8",
+        "react-intl": "^6.1.1",
         "react-lazylog": "^4.5.3",
         "react-markdown": "^7.0.1",
         "react-query": "^3.39.1",
@@ -40,7 +40,7 @@
         "react-router-dom": "^6.3.0",
         "react-select": "^5.4.0",
         "react-table": "^7.8.0",
-        "react-use": "^15.3.8",
+        "react-use": "^17.4.0",
         "react-use-intercom": "^1.5.2",
         "react-widgets": "^4.6.1",
         "recharts": "^2.1.13",
@@ -3386,76 +3386,76 @@
       }
     },
     "node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.12.0.tgz",
+      "integrity": "sha512-0/wm9b7brUD40kx7KSE0S532T8EfH06Zc41rGlinoNyYXnuusR6ull2x63iFJgVXgwahm42hAW7dcYdZ+llZzA==",
       "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/intl-localematcher": "0.2.31",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/ecma402-abstract/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/@formatjs/fast-memoize": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
-      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.6.tgz",
+      "integrity": "sha512-9CWZ3+wCkClKHX+i5j+NyoBVqGf0pIskTo6Xl6ihGokYM2yqSSS68JIgeo+99UIHc+7vi9L3/SDSz/dWI9SNlA==",
       "dependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/fast-memoize/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.19.tgz",
-      "integrity": "sha512-8HsLm9YLyVVIDMyBJb7wmve2wGd461cUwJ470eUog5YH5ZsF4p5lgvaJ+oGKxz1mrSMNNdDHU9v/NDsS+z+ilg==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.7.tgz",
+      "integrity": "sha512-KM4ikG5MloXMulqn39Js3ypuVzpPKq/DDplvl01PE2qD9rAzFO8YtaUCC9vr9j3sRXwdHPeTe8r3J/8IJgvYEQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-skeleton-parser": "1.3.6",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/icu-skeleton-parser": "1.3.13",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/icu-messageformat-parser/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.13.tgz",
+      "integrity": "sha512-qb1kxnA4ep76rV+d9JICvZBThBpK5X+nh1dLmmIReX72QyglicsaOmKEcdcbp7/giCWfhVs6CXPVA2JJ5/ZvAw==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/icu-skeleton-parser/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/@formatjs/intl": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.1.1.tgz",
-      "integrity": "sha512-iUjBnV2XE+mS3run+Rj/96rfxvwSiCsqMrSbIWoU4dOjIYil7boZK2mCamxoz8CqiiL4VD4ym5EEDbYPWirlFA==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.0.19",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
-        "intl-messageformat": "9.12.0",
-        "tslib": "^2.1.0"
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.4.1.tgz",
+      "integrity": "sha512-lWJ5dhLlkbMeWQOxBCq4MJNkB735TO5rwvcnnFzTx1H9Pkth1OLRH1R1aCAudptbd0Qe1W2hwJiMLumKpl6WCg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/fast-memoize": "1.2.6",
+        "@formatjs/icu-messageformat-parser": "2.1.7",
+        "@formatjs/intl-displaynames": "6.1.3",
+        "@formatjs/intl-listformat": "7.1.2",
+        "intl-messageformat": "10.1.4",
+        "tslib": "2.4.0"
       },
       "peerDependencies": {
-        "typescript": "^4.5"
+        "typescript": "^4.7"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3464,52 +3464,52 @@
       }
     },
     "node_modules/@formatjs/intl-displaynames": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
-      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.1.3.tgz",
+      "integrity": "sha512-yBB165IH72fweGymRPrq8PQ4R5gKMR8vOj6XmkxGBICyJMhknc+RpG02g9Jsk/4jvO6qw/H0QtXHrHIg+Jv0sw==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/intl-localematcher": "0.2.31",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl-displaynames/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/@formatjs/intl-listformat": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
-      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.1.2.tgz",
+      "integrity": "sha512-WfWkJ8k41jZIhXgBtC2T1SpTSKYig99g9MVqrVRco4kduv/6GUWq1eMjk84qZfbU4rwdwc8qct+/gB6DTS17+w==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/intl-localematcher": "0.2.31",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl-listformat/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/@formatjs/intl-localematcher": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "version": "0.2.31",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.31.tgz",
+      "integrity": "sha512-9QTjdSBpQ7wHShZgsNzNig5qT3rCPvmZogS/wXZzKotns5skbXgs0I7J8cuN0PPqXyynvNVuN+iOKhNS2eb+ZA==",
       "dependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl-localematcher/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/@formatjs/intl/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.1.1",
@@ -25417,20 +25417,20 @@
       }
     },
     "node_modules/intl-messageformat": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.12.0.tgz",
-      "integrity": "sha512-5Q9j21JreB1G27/CqMYsA+pvJ19JjHyhiTSeUuvZK9BCDJGHtOLgpUUcGM+GLHiUuoVMKVeeX1smamiVHQrSKQ==",
+      "version": "10.1.4",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.1.4.tgz",
+      "integrity": "sha512-tXCmWCXhbeHOF28aIf5b9ce3kwdwGyIiiSXVZsyDwksMiGn5Tp0MrMvyeuHuz4uN1UL+NfGOztHmE+6aLFp1wQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.0.19",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/fast-memoize": "1.2.6",
+        "@formatjs/icu-messageformat-parser": "2.1.7",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/intl-messageformat/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/invariant": {
       "version": "2.2.4",
@@ -36343,24 +36343,24 @@
       }
     },
     "node_modules/react-intl": {
-      "version": "5.24.8",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.24.8.tgz",
-      "integrity": "sha512-uFBA7Fvh3XsHVn6b+jgVTk8hMBpQFvkterWwq4KHrjn8nMmLJf6lGqPawAcmhXes0q29JruCQyKX0vj+G7iokA==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-messageformat-parser": "2.0.19",
-        "@formatjs/intl": "2.1.1",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.1.1.tgz",
+      "integrity": "sha512-nNNHBxivUdNwIcqNR1I4mLDAfDtnh1glEaOa8Sfu2pUDvKzYQyX6+in1PDcIn5RyV6enMgw9I6H+VwtlRDXhRw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/icu-messageformat-parser": "2.1.7",
+        "@formatjs/intl": "2.4.1",
+        "@formatjs/intl-displaynames": "6.1.3",
+        "@formatjs/intl-listformat": "7.1.2",
         "@types/hoist-non-react-statics": "^3.3.1",
-        "@types/react": "16 || 17",
+        "@types/react": "16 || 17 || 18",
         "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "9.12.0",
-        "tslib": "^2.1.0"
+        "intl-messageformat": "10.1.4",
+        "tslib": "2.4.0"
       },
       "peerDependencies": {
-        "react": "^16.3.0 || 17",
-        "typescript": "^4.5"
+        "react": "^16.6.0 || 17 || 18",
+        "typescript": "^4.7"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -36369,9 +36369,9 @@
       }
     },
     "node_modules/react-intl/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/react-is": {
       "version": "16.13.1",
@@ -39460,28 +39460,28 @@
       }
     },
     "node_modules/react-use": {
-      "version": "15.3.8",
-      "resolved": "https://registry.npmjs.org/react-use/-/react-use-15.3.8.tgz",
-      "integrity": "sha512-GeGcrmGuUvZrY5wER3Lnph9DSYhZt5nEjped4eKDq8BRGr2CnLf9bDQWG9RFc7oCPphnscUUdOovzq0E5F2c6Q==",
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+      "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
       "dependencies": {
-        "@types/js-cookie": "2.2.6",
-        "@xobotyi/scrollbar-width": "1.9.5",
-        "copy-to-clipboard": "^3.2.0",
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
         "fast-deep-equal": "^3.1.3",
         "fast-shallow-equal": "^1.0.0",
         "js-cookie": "^2.2.1",
-        "nano-css": "^5.2.1",
+        "nano-css": "^5.3.1",
         "react-universal-interface": "^0.6.2",
         "resize-observer-polyfill": "^1.5.1",
-        "screenfull": "^5.0.0",
+        "screenfull": "^5.1.0",
         "set-harmonic-interval": "^1.0.1",
-        "throttle-debounce": "^2.1.0",
+        "throttle-debounce": "^3.0.1",
         "ts-easing": "^0.2.0",
-        "tslib": "^2.0.0"
+        "tslib": "^2.1.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0  || ^17.0.0",
-        "react-dom": "^16.8.0  || ^17.0.0"
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/react-use-intercom": {
@@ -44578,11 +44578,11 @@
       "dev": true
     },
     "node_modules/throttle-debounce": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
-      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       }
     },
     "node_modules/through": {
@@ -50123,136 +50123,136 @@
       }
     },
     "@formatjs/ecma402-abstract": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.12.0.tgz",
+      "integrity": "sha512-0/wm9b7brUD40kx7KSE0S532T8EfH06Zc41rGlinoNyYXnuusR6ull2x63iFJgVXgwahm42hAW7dcYdZ+llZzA==",
       "requires": {
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/intl-localematcher": "0.2.31",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
     "@formatjs/fast-memoize": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
-      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.6.tgz",
+      "integrity": "sha512-9CWZ3+wCkClKHX+i5j+NyoBVqGf0pIskTo6Xl6ihGokYM2yqSSS68JIgeo+99UIHc+7vi9L3/SDSz/dWI9SNlA==",
       "requires": {
-        "tslib": "^2.1.0"
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
     "@formatjs/icu-messageformat-parser": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.19.tgz",
-      "integrity": "sha512-8HsLm9YLyVVIDMyBJb7wmve2wGd461cUwJ470eUog5YH5ZsF4p5lgvaJ+oGKxz1mrSMNNdDHU9v/NDsS+z+ilg==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.7.tgz",
+      "integrity": "sha512-KM4ikG5MloXMulqn39Js3ypuVzpPKq/DDplvl01PE2qD9rAzFO8YtaUCC9vr9j3sRXwdHPeTe8r3J/8IJgvYEQ==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-skeleton-parser": "1.3.6",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/icu-skeleton-parser": "1.3.13",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
     "@formatjs/icu-skeleton-parser": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.13.tgz",
+      "integrity": "sha512-qb1kxnA4ep76rV+d9JICvZBThBpK5X+nh1dLmmIReX72QyglicsaOmKEcdcbp7/giCWfhVs6CXPVA2JJ5/ZvAw==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
     "@formatjs/intl": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.1.1.tgz",
-      "integrity": "sha512-iUjBnV2XE+mS3run+Rj/96rfxvwSiCsqMrSbIWoU4dOjIYil7boZK2mCamxoz8CqiiL4VD4ym5EEDbYPWirlFA==",
-      "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.0.19",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
-        "intl-messageformat": "9.12.0",
-        "tslib": "^2.1.0"
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.4.1.tgz",
+      "integrity": "sha512-lWJ5dhLlkbMeWQOxBCq4MJNkB735TO5rwvcnnFzTx1H9Pkth1OLRH1R1aCAudptbd0Qe1W2hwJiMLumKpl6WCg==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/fast-memoize": "1.2.6",
+        "@formatjs/icu-messageformat-parser": "2.1.7",
+        "@formatjs/intl-displaynames": "6.1.3",
+        "@formatjs/intl-listformat": "7.1.2",
+        "intl-messageformat": "10.1.4",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
     "@formatjs/intl-displaynames": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
-      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.1.3.tgz",
+      "integrity": "sha512-yBB165IH72fweGymRPrq8PQ4R5gKMR8vOj6XmkxGBICyJMhknc+RpG02g9Jsk/4jvO6qw/H0QtXHrHIg+Jv0sw==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/intl-localematcher": "0.2.31",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
     "@formatjs/intl-listformat": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
-      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.1.2.tgz",
+      "integrity": "sha512-WfWkJ8k41jZIhXgBtC2T1SpTSKYig99g9MVqrVRco4kduv/6GUWq1eMjk84qZfbU4rwdwc8qct+/gB6DTS17+w==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/intl-localematcher": "0.2.31",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
     "@formatjs/intl-localematcher": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "version": "0.2.31",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.31.tgz",
+      "integrity": "sha512-9QTjdSBpQ7wHShZgsNzNig5qT3rCPvmZogS/wXZzKotns5skbXgs0I7J8cuN0PPqXyynvNVuN+iOKhNS2eb+ZA==",
       "requires": {
-        "tslib": "^2.1.0"
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
@@ -67153,20 +67153,20 @@
       "dev": true
     },
     "intl-messageformat": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.12.0.tgz",
-      "integrity": "sha512-5Q9j21JreB1G27/CqMYsA+pvJ19JjHyhiTSeUuvZK9BCDJGHtOLgpUUcGM+GLHiUuoVMKVeeX1smamiVHQrSKQ==",
+      "version": "10.1.4",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.1.4.tgz",
+      "integrity": "sha512-tXCmWCXhbeHOF28aIf5b9ce3kwdwGyIiiSXVZsyDwksMiGn5Tp0MrMvyeuHuz4uN1UL+NfGOztHmE+6aLFp1wQ==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.0.19",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/fast-memoize": "1.2.6",
+        "@formatjs/icu-messageformat-parser": "2.1.7",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
@@ -75438,26 +75438,26 @@
       }
     },
     "react-intl": {
-      "version": "5.24.8",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.24.8.tgz",
-      "integrity": "sha512-uFBA7Fvh3XsHVn6b+jgVTk8hMBpQFvkterWwq4KHrjn8nMmLJf6lGqPawAcmhXes0q29JruCQyKX0vj+G7iokA==",
-      "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-messageformat-parser": "2.0.19",
-        "@formatjs/intl": "2.1.1",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.1.1.tgz",
+      "integrity": "sha512-nNNHBxivUdNwIcqNR1I4mLDAfDtnh1glEaOa8Sfu2pUDvKzYQyX6+in1PDcIn5RyV6enMgw9I6H+VwtlRDXhRw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.12.0",
+        "@formatjs/icu-messageformat-parser": "2.1.7",
+        "@formatjs/intl": "2.4.1",
+        "@formatjs/intl-displaynames": "6.1.3",
+        "@formatjs/intl-listformat": "7.1.2",
         "@types/hoist-non-react-statics": "^3.3.1",
-        "@types/react": "16 || 17",
+        "@types/react": "16 || 17 || 18",
         "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "9.12.0",
-        "tslib": "^2.1.0"
+        "intl-messageformat": "10.1.4",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
@@ -77493,24 +77493,24 @@
       "requires": {}
     },
     "react-use": {
-      "version": "15.3.8",
-      "resolved": "https://registry.npmjs.org/react-use/-/react-use-15.3.8.tgz",
-      "integrity": "sha512-GeGcrmGuUvZrY5wER3Lnph9DSYhZt5nEjped4eKDq8BRGr2CnLf9bDQWG9RFc7oCPphnscUUdOovzq0E5F2c6Q==",
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+      "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
       "requires": {
-        "@types/js-cookie": "2.2.6",
-        "@xobotyi/scrollbar-width": "1.9.5",
-        "copy-to-clipboard": "^3.2.0",
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
         "fast-deep-equal": "^3.1.3",
         "fast-shallow-equal": "^1.0.0",
         "js-cookie": "^2.2.1",
-        "nano-css": "^5.2.1",
+        "nano-css": "^5.3.1",
         "react-universal-interface": "^0.6.2",
         "resize-observer-polyfill": "^1.5.1",
-        "screenfull": "^5.0.0",
+        "screenfull": "^5.1.0",
         "set-harmonic-interval": "^1.0.1",
-        "throttle-debounce": "^2.1.0",
+        "throttle-debounce": "^3.0.1",
         "ts-easing": "^0.2.0",
-        "tslib": "^2.0.0"
+        "tslib": "^2.1.0"
       },
       "dependencies": {
         "tslib": {
@@ -81374,9 +81374,9 @@
       "dev": true
     },
     "throttle-debounce": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
-      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
     },
     "through": {
       "version": "2.3.8",
diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json
index bf04b86b99f1..f60ceec9db09 100644
--- a/airbyte-webapp/package.json
+++ b/airbyte-webapp/package.json
@@ -48,7 +48,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
-    "react-intl": "^5.24.8",
+    "react-intl": "^6.1.1",
     "react-lazylog": "^4.5.3",
     "react-markdown": "^7.0.1",
     "react-query": "^3.39.1",
@@ -56,7 +56,7 @@
     "react-router-dom": "^6.3.0",
     "react-select": "^5.4.0",
     "react-table": "^7.8.0",
-    "react-use": "^15.3.8",
+    "react-use": "^17.4.0",
     "react-use-intercom": "^1.5.2",
     "react-widgets": "^4.6.1",
     "recharts": "^2.1.13",
diff --git a/airbyte-webapp/src/App.tsx b/airbyte-webapp/src/App.tsx
index 3413daa3759a..de6da864a520 100644
--- a/airbyte-webapp/src/App.tsx
+++ b/airbyte-webapp/src/App.tsx
@@ -29,7 +29,7 @@ import { Routing } from "./pages/routes";
 import { WorkspaceServiceProvider } from "./services/workspaces/WorkspacesService";
 import { theme } from "./theme";
 
-const StyleProvider: React.FC = ({ children }) => (
+const StyleProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <ThemeProvider theme={theme}>
     <GlobalStyle />
     {children}
@@ -38,7 +38,7 @@ const StyleProvider: React.FC = ({ children }) => (
 
 const configProviders: ValueProvider<Config> = [envConfigProvider, windowConfigProvider];
 
-const Services: React.FC = ({ children }) => (
+const Services: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <AnalyticsProvider>
     <ApiErrorBoundary>
       <WorkspaceServiceProvider>
diff --git a/airbyte-webapp/src/components/ApiErrorBoundary/ApiErrorBoundary.tsx b/airbyte-webapp/src/components/ApiErrorBoundary/ApiErrorBoundary.tsx
index 41bc843d1695..112098e3b3f4 100644
--- a/airbyte-webapp/src/components/ApiErrorBoundary/ApiErrorBoundary.tsx
+++ b/airbyte-webapp/src/components/ApiErrorBoundary/ApiErrorBoundary.tsx
@@ -38,7 +38,7 @@ interface ApiErrorBoundaryProps {
 const RETRY_DELAY = 2500;
 
 class ApiErrorBoundary extends React.Component<
-  ApiErrorBoundaryHookProps & ApiErrorBoundaryProps,
+  React.PropsWithChildren<ApiErrorBoundaryHookProps & ApiErrorBoundaryProps>,
   ApiErrorBoundaryState
 > {
   state: ApiErrorBoundaryState = {
@@ -107,7 +107,10 @@ class ApiErrorBoundary extends React.Component<
   }
 }
 
-const ApiErrorBoundaryWithHooks: React.FC<ApiErrorBoundaryProps> = ({ children, ...props }) => {
+const ApiErrorBoundaryWithHooks: React.FC<React.PropsWithChildren<ApiErrorBoundaryProps>> = ({
+  children,
+  ...props
+}) => {
   const { reset } = useQueryErrorResetBoundary();
   const location = useLocation();
   const navigate = useNavigate();
diff --git a/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx b/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx
index 9a1d4ef0021d..bd2f29202fb9 100644
--- a/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx
+++ b/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx
@@ -28,7 +28,7 @@ const MainInfo = styled.div`
   flex-direction: column;
 `;
 
-const BaseClearView: React.FC = ({ children }) => {
+const BaseClearView: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const { formatMessage } = useIntl();
   return (
     <Content>
diff --git a/airbyte-webapp/src/components/CenteredPageComponents/PageViewContainer.tsx b/airbyte-webapp/src/components/CenteredPageComponents/PageViewContainer.tsx
index d0a715fffd60..78348fd7a681 100644
--- a/airbyte-webapp/src/components/CenteredPageComponents/PageViewContainer.tsx
+++ b/airbyte-webapp/src/components/CenteredPageComponents/PageViewContainer.tsx
@@ -4,7 +4,7 @@ import BaseClearView from "components/BaseClearView";
 
 import PaddedCard from "./PaddedCard";
 
-const PageViewContainer: React.FC = (props) => {
+const PageViewContainer: React.FC<React.PropsWithChildren<unknown>> = (props) => {
   return (
     <BaseClearView>
       <PaddedCard>{props.children}</PaddedCard>
diff --git a/airbyte-webapp/src/components/GroupControls/GroupControls.tsx b/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
index e2007158cea8..447f23966c2e 100644
--- a/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
+++ b/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
@@ -27,7 +27,7 @@ interface GroupControlsProps {
   fullWidthTitle?: boolean;
 }
 
-const GroupControls: React.FC<GroupControlsProps> = ({
+const GroupControls: React.FC<React.PropsWithChildren<GroupControlsProps>> = ({
   title,
   description,
   children,
diff --git a/airbyte-webapp/src/components/InfoBox/InfoBox.tsx b/airbyte-webapp/src/components/InfoBox/InfoBox.tsx
index 8e7378356b68..f901c98e707a 100644
--- a/airbyte-webapp/src/components/InfoBox/InfoBox.tsx
+++ b/airbyte-webapp/src/components/InfoBox/InfoBox.tsx
@@ -17,7 +17,7 @@ const Box = styled.div`
   align-items: center;
 `;
 
-export const InfoBox: React.FC<Props> = ({ children, className, icon }) => {
+export const InfoBox: React.FC<React.PropsWithChildren<Props>> = ({ children, className, icon }) => {
   return (
     <Box className={className}>
       {icon && <FontAwesomeIcon size="lg" icon={icon} />}
diff --git a/airbyte-webapp/src/components/JobItem/components/ContentWrapper.tsx b/airbyte-webapp/src/components/JobItem/components/ContentWrapper.tsx
index ee303163cde3..2cad28c52136 100644
--- a/airbyte-webapp/src/components/JobItem/components/ContentWrapper.tsx
+++ b/airbyte-webapp/src/components/JobItem/components/ContentWrapper.tsx
@@ -9,7 +9,7 @@ interface IProps {
   onToggled?: () => void;
 }
 
-const ContentWrapper: React.FC<IProps> = ({ children, isOpen, onToggled }) => {
+const ContentWrapper: React.FC<React.PropsWithChildren<IProps>> = ({ children, isOpen, onToggled }) => {
   return (
     <motion.div
       className={styles.container}
diff --git a/airbyte-webapp/src/components/Label/Label.tsx b/airbyte-webapp/src/components/Label/Label.tsx
index c6d6b8382d10..06f6ecdd2d4d 100644
--- a/airbyte-webapp/src/components/Label/Label.tsx
+++ b/airbyte-webapp/src/components/Label/Label.tsx
@@ -33,7 +33,7 @@ const MessageText = styled.span<Pick<IProps, "error" | "success">>`
   font-size: 13px;
 `;
 
-const Label: React.FC<IProps> = (props) => (
+const Label: React.FC<React.PropsWithChildren<IProps>> = (props) => (
   <Content additionLength={props.additionLength} className={props.className} onClick={props.onClick}>
     {props.children}
     {props.message && (
diff --git a/airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx b/airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx
index 5c162321ca16..7a7713f1bd6c 100644
--- a/airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx
+++ b/airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx
@@ -19,7 +19,7 @@ const ControlContainer = styled.div`
   display: inline-block;
 `;
 
-const ControlLabels: React.FC<ControlLabelsProps> = (props) => (
+const ControlLabels: React.FC<React.PropsWithChildren<ControlLabelsProps>> = (props) => (
   <ControlContainer className={props.className}>
     <Label
       error={props.error}
diff --git a/airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.tsx b/airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.tsx
index ea2a01a4dbca..ca2b482dc240 100644
--- a/airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.tsx
+++ b/airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.tsx
@@ -7,7 +7,11 @@ interface LoadingBackdropProps {
   loading: boolean;
   small?: boolean;
 }
-export const LoadingBackdrop: React.FC<LoadingBackdropProps> = ({ loading, small, children }) => {
+export const LoadingBackdrop: React.FC<React.PropsWithChildren<LoadingBackdropProps>> = ({
+  loading,
+  small,
+  children,
+}) => {
   return (
     <div className={styles.loadingBackdropContainer}>
       {loading && (
diff --git a/airbyte-webapp/src/components/Markdown/Markdown.tsx b/airbyte-webapp/src/components/Markdown/Markdown.tsx
index d12233003da5..ecbb395b4d4a 100644
--- a/airbyte-webapp/src/components/Markdown/Markdown.tsx
+++ b/airbyte-webapp/src/components/Markdown/Markdown.tsx
@@ -16,7 +16,7 @@ interface MarkdownProps {
   rehypePlugins?: PluggableList;
 }
 
-export const Markdown: React.VFC<MarkdownProps> = ({ content, className, rehypePlugins }) => {
+export const Markdown: React.FC<MarkdownProps> = ({ content, className, rehypePlugins }) => {
   return (
     <ReactMarkdown
       // Open everything except fragment only links in a new tab
diff --git a/airbyte-webapp/src/components/Modal/Modal.tsx b/airbyte-webapp/src/components/Modal/Modal.tsx
index bebff01b8377..5d28e4131a33 100644
--- a/airbyte-webapp/src/components/Modal/Modal.tsx
+++ b/airbyte-webapp/src/components/Modal/Modal.tsx
@@ -20,7 +20,7 @@ const cardStyleBySize = {
   xl: styles.xl,
 };
 
-const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, cardless, testId }) => {
+const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({ children, title, size, onClose, cardless, testId }) => {
   const [isOpen, setIsOpen] = useState(true);
 
   const onModalClose = () => {
diff --git a/airbyte-webapp/src/components/Modal/ModalBody.tsx b/airbyte-webapp/src/components/Modal/ModalBody.tsx
index 759ebc8833b1..608701bdc7f1 100644
--- a/airbyte-webapp/src/components/Modal/ModalBody.tsx
+++ b/airbyte-webapp/src/components/Modal/ModalBody.tsx
@@ -7,7 +7,11 @@ interface ModalBodyProps {
   padded?: boolean;
 }
 
-export const ModalBody: React.FC<ModalBodyProps> = ({ children, maxHeight, padded = true }) => {
+export const ModalBody: React.FC<React.PropsWithChildren<ModalBodyProps>> = ({
+  children,
+  maxHeight,
+  padded = true,
+}) => {
   const modalStyles = classnames(styles.modalBody, {
     [styles.paddingNone]: !padded,
   });
diff --git a/airbyte-webapp/src/components/Modal/ModalFooter.tsx b/airbyte-webapp/src/components/Modal/ModalFooter.tsx
index d7ce6ab47b7a..f391244f2e8a 100644
--- a/airbyte-webapp/src/components/Modal/ModalFooter.tsx
+++ b/airbyte-webapp/src/components/Modal/ModalFooter.tsx
@@ -1,5 +1,5 @@
 import styles from "./ModalFooter.module.scss";
 
-export const ModalFooter: React.FC = ({ children }) => {
+export const ModalFooter: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return <div className={styles.modalFooter}>{children}</div>;
 };
diff --git a/airbyte-webapp/src/components/Table/Table.tsx b/airbyte-webapp/src/components/Table/Table.tsx
index 6c766d993393..aa2c3ace503f 100644
--- a/airbyte-webapp/src/components/Table/Table.tsx
+++ b/airbyte-webapp/src/components/Table/Table.tsx
@@ -14,7 +14,7 @@ type IHeaderProps = {
   collapse?: boolean;
   customWidth?: number;
   customPadding?: PaddingProps;
-} & ColumnInstance;
+} & ColumnInstance<Record<string, unknown>>;
 
 type ICellProps = {
   column: IHeaderProps;
diff --git a/airbyte-webapp/src/components/base/Button/LoadingButton.tsx b/airbyte-webapp/src/components/base/Button/LoadingButton.tsx
index 1681bba49f1a..243256507273 100644
--- a/airbyte-webapp/src/components/base/Button/LoadingButton.tsx
+++ b/airbyte-webapp/src/components/base/Button/LoadingButton.tsx
@@ -40,7 +40,7 @@ const Invisible = styled.div`
  * the only one <Button/> component and set loading state via props
  * issue: https://github.com/airbytehq/airbyte/issues/12705
  * */
-const LoadingButton: React.FC<ButtonProps> = (props) => {
+const LoadingButton: React.FC<React.PropsWithChildren<ButtonProps>> = (props) => {
   if (props.isLoading) {
     return (
       <ButtonView {...props}>
diff --git a/airbyte-webapp/src/components/base/Card/Card.tsx b/airbyte-webapp/src/components/base/Card/Card.tsx
index ff317d95735e..c5c4c099f2d7 100644
--- a/airbyte-webapp/src/components/base/Card/Card.tsx
+++ b/airbyte-webapp/src/components/base/Card/Card.tsx
@@ -13,7 +13,7 @@ export interface CardProps {
   roundedBottom?: boolean;
 }
 
-export const Card: React.FC<CardProps> = ({
+export const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
   children,
   title,
   className,
diff --git a/airbyte-webapp/src/components/base/Popout/index.stories.tsx b/airbyte-webapp/src/components/base/Popout/index.stories.tsx
index 591ed3046328..f0921148bf9e 100644
--- a/airbyte-webapp/src/components/base/Popout/index.stories.tsx
+++ b/airbyte-webapp/src/components/base/Popout/index.stories.tsx
@@ -40,7 +40,6 @@ const Template: ComponentStory<typeof Popout> = (args) => (
 
 export const Example = Template.bind({});
 Example.args = {
-  children: "Text",
   title: "Title",
   isSearchable: false,
 };
diff --git a/airbyte-webapp/src/components/base/Text/Text.tsx b/airbyte-webapp/src/components/base/Text/Text.tsx
index f277a1e9a977..6f52e54b6db4 100644
--- a/airbyte-webapp/src/components/base/Text/Text.tsx
+++ b/airbyte-webapp/src/components/base/Text/Text.tsx
@@ -50,7 +50,7 @@ const isHeadingType = (props: TextProps | HeadingProps): props is HeadingProps =
   return props.as ? /^h[0-6]$/.test(props.as) : false;
 };
 
-export const Text: React.FC<TextProps | HeadingProps> = React.memo((props) => {
+export const Text: React.FC<React.PropsWithChildren<TextProps | HeadingProps>> = React.memo((props) => {
   const isHeading = isHeadingType(props);
   const { as = "p", centered = false, children } = props;
 
diff --git a/airbyte-webapp/src/components/base/TextArea/TextArea.tsx b/airbyte-webapp/src/components/base/TextArea/TextArea.tsx
index 52b79d316a03..745af0d6b08b 100644
--- a/airbyte-webapp/src/components/base/TextArea/TextArea.tsx
+++ b/airbyte-webapp/src/components/base/TextArea/TextArea.tsx
@@ -8,7 +8,13 @@ interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   light?: boolean;
 }
 
-export const TextArea: React.FC<TextAreaProps> = ({ error, light, children, className, ...textAreaProps }) => (
+export const TextArea: React.FC<React.PropsWithChildren<TextAreaProps>> = ({
+  error,
+  light,
+  children,
+  className,
+  ...textAreaProps
+}) => (
   <textarea
     {...textAreaProps}
     className={classNames(
diff --git a/airbyte-webapp/src/components/base/Tooltip/InfoTooltip.tsx b/airbyte-webapp/src/components/base/Tooltip/InfoTooltip.tsx
index 75075b3de65a..e68f3405c076 100644
--- a/airbyte-webapp/src/components/base/Tooltip/InfoTooltip.tsx
+++ b/airbyte-webapp/src/components/base/Tooltip/InfoTooltip.tsx
@@ -5,7 +5,7 @@ import { InfoIcon } from "components/icons/InfoIcon";
 import styles from "./InfoTooltip.module.scss";
 import { Tooltip } from "./Tooltip";
 
-export const InfoTooltip: React.FC = ({ children }) => {
+export const InfoTooltip: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <Tooltip
       control={
diff --git a/airbyte-webapp/src/components/base/Tooltip/Tooltip.tsx b/airbyte-webapp/src/components/base/Tooltip/Tooltip.tsx
index 7d08a997f13b..a07ced3e56de 100644
--- a/airbyte-webapp/src/components/base/Tooltip/Tooltip.tsx
+++ b/airbyte-webapp/src/components/base/Tooltip/Tooltip.tsx
@@ -19,7 +19,7 @@ const FLOATING_OPTIONS: UseFloatingProps = {
   whileElementsMounted: autoUpdate,
 };
 
-export const Tooltip: React.FC<TooltipProps> = (props) => {
+export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = (props) => {
   const { children, control, className, disabled, cursor, theme = "dark", placement = "bottom" } = props;
 
   const [isMouseOver, setIsMouseOver] = useState(false);
diff --git a/airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.tsx b/airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.tsx
index bb988391854f..4535667f085c 100644
--- a/airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.tsx
+++ b/airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.tsx
@@ -6,7 +6,7 @@ interface TooltipLearnMoreLinkProps {
   url: string;
 }
 
-export const TooltipLearnMoreLink: React.VFC<TooltipLearnMoreLinkProps> = ({ url }) => (
+export const TooltipLearnMoreLink: React.FC<TooltipLearnMoreLinkProps> = ({ url }) => (
   <div className={styles.container}>
     <a href={url} target="_blank" rel="noreferrer">
       <FormattedMessage id="ui.learnMore" />
diff --git a/airbyte-webapp/src/components/base/Tooltip/TooltipTable.tsx b/airbyte-webapp/src/components/base/Tooltip/TooltipTable.tsx
index 23812787ff11..103110823908 100644
--- a/airbyte-webapp/src/components/base/Tooltip/TooltipTable.tsx
+++ b/airbyte-webapp/src/components/base/Tooltip/TooltipTable.tsx
@@ -5,7 +5,7 @@ interface TooltipTableProps {
   rows: React.ReactNode[][];
 }
 
-export const TooltipTable: React.VFC<TooltipTableProps> = ({ rows }) => {
+export const TooltipTable: React.FC<TooltipTableProps> = ({ rows }) => {
   const { theme } = useTooltipContext();
 
   return rows.length > 0 ? (
diff --git a/airbyte-webapp/src/config/ConfigServiceProvider.tsx b/airbyte-webapp/src/config/ConfigServiceProvider.tsx
index f1bb41d97462..0c5733520c1a 100644
--- a/airbyte-webapp/src/config/ConfigServiceProvider.tsx
+++ b/airbyte-webapp/src/config/ConfigServiceProvider.tsx
@@ -22,10 +22,12 @@ export function useConfig<T extends Config>(): T {
   return useMemo(() => configService.config as unknown as T, [configService.config]);
 }
 
-const ConfigServiceInner: React.FC<{
-  defaultConfig: Config;
-  providers?: ValueProvider<Config>;
-}> = ({ children, defaultConfig, providers }) => {
+const ConfigServiceInner: React.FC<
+  React.PropsWithChildren<{
+    defaultConfig: Config;
+    providers?: ValueProvider<Config>;
+  }>
+> = ({ children, defaultConfig, providers }) => {
   const { loading, value } = useAsync(
     async () => (providers ? applyProviders(defaultConfig, providers) : defaultConfig),
     [providers]
@@ -39,7 +41,4 @@ const ConfigServiceInner: React.FC<{
   return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
 };
 
-export const ConfigServiceProvider: React.FC<{
-  defaultConfig: Config;
-  providers?: ValueProvider<Config>;
-}> = React.memo(ConfigServiceInner);
+export const ConfigServiceProvider = React.memo(ConfigServiceInner);
diff --git a/airbyte-webapp/src/core/ApiServices.tsx b/airbyte-webapp/src/core/ApiServices.tsx
index 5845ff9e3b5e..d3c8dbe39c5f 100644
--- a/airbyte-webapp/src/core/ApiServices.tsx
+++ b/airbyte-webapp/src/core/ApiServices.tsx
@@ -9,7 +9,7 @@ import { HealthService } from "./health/HealthService";
 import { RequestMiddleware } from "./request/RequestMiddleware";
 import { useGetService, useInjectServices } from "./servicesProvider";
 
-export const ApiServices: React.FC = React.memo(({ children }) => {
+export const ApiServices: React.FC<React.PropsWithChildren<unknown>> = React.memo(({ children }) => {
   const config = useConfig();
   const middlewares = useGetService<RequestMiddleware[]>("DefaultRequestMiddlewares");
 
diff --git a/airbyte-webapp/src/core/i18n/I18nProvider.test.tsx b/airbyte-webapp/src/core/i18n/I18nProvider.test.tsx
index e158c668e722..988c871cf48b 100644
--- a/airbyte-webapp/src/core/i18n/I18nProvider.test.tsx
+++ b/airbyte-webapp/src/core/i18n/I18nProvider.test.tsx
@@ -1,10 +1,11 @@
 import { render } from "@testing-library/react";
 import { act, renderHook } from "@testing-library/react-hooks";
+import React from "react";
 import { FormattedMessage, IntlConfig, useIntl } from "react-intl";
 
 import { I18nProvider, useI18nContext } from "./I18nProvider";
 
-const provider = (messages: IntlConfig["messages"], locale = "en"): React.FC => {
+const provider = (messages: IntlConfig["messages"], locale = "en"): React.FC<React.PropsWithChildren<unknown>> => {
   return ({ children }) => (
     <I18nProvider locale={locale} messages={messages}>
       {children}
diff --git a/airbyte-webapp/src/core/i18n/I18nProvider.tsx b/airbyte-webapp/src/core/i18n/I18nProvider.tsx
index 8a59a76ef901..7540fa504304 100644
--- a/airbyte-webapp/src/core/i18n/I18nProvider.tsx
+++ b/airbyte-webapp/src/core/i18n/I18nProvider.tsx
@@ -20,7 +20,7 @@ interface I18nProviderProps {
   locale: string;
 }
 
-export const I18nProvider: React.FC<I18nProviderProps> = ({ children, messages, locale }) => {
+export const I18nProvider: React.FC<React.PropsWithChildren<I18nProviderProps>> = ({ children, messages, locale }) => {
   const [overwrittenMessages, setOvewrittenMessages] = useState<Messages>();
 
   const i18nOverwriteContext = useMemo<I18nContext>(
diff --git a/airbyte-webapp/src/core/servicesProvider.tsx b/airbyte-webapp/src/core/servicesProvider.tsx
index 2e77238a57a1..e84f2e026d11 100644
--- a/airbyte-webapp/src/core/servicesProvider.tsx
+++ b/airbyte-webapp/src/core/servicesProvider.tsx
@@ -15,7 +15,10 @@ interface ServicesProviderApi {
 
 const ServicesProviderContext = React.createContext<ServicesProviderApi | null>(null);
 
-export const ServicesProvider: React.FC<{ inject?: ServiceContainer }> = ({ children, inject }) => {
+export const ServicesProvider: React.FC<React.PropsWithChildren<{ inject?: ServiceContainer }>> = ({
+  children,
+  inject,
+}) => {
   const [registeredServices, { remove, set }] = useMap<ServiceContainer>(inject);
 
   const ctxValue = useMemo<ServicesProviderApi>(
diff --git a/airbyte-webapp/src/hooks/services/BulkEdit/BulkEditService.tsx b/airbyte-webapp/src/hooks/services/BulkEdit/BulkEditService.tsx
index bfe620e4b89c..9d0289bef35d 100644
--- a/airbyte-webapp/src/hooks/services/BulkEdit/BulkEditService.tsx
+++ b/airbyte-webapp/src/hooks/services/BulkEdit/BulkEditService.tsx
@@ -28,10 +28,12 @@ const defaultOptions: Partial<AirbyteStreamConfiguration> = {
   selected: false,
 };
 
-const BatchEditProvider: React.FC<{
-  nodes: SyncSchemaStream[];
-  update: (streams: SyncSchemaStream[]) => void;
-}> = ({ children, nodes, update }) => {
+const BatchEditProvider: React.FC<
+  React.PropsWithChildren<{
+    nodes: SyncSchemaStream[];
+    update: (streams: SyncSchemaStream[]) => void;
+  }>
+> = ({ children, nodes, update }) => {
   const [selectedBatchNodes, { reset, toggle, add }] = useSet<string | undefined>(new Set());
   const [options, setOptions] = useState<Partial<AirbyteStreamConfiguration>>(defaultOptions);
 
diff --git a/airbyte-webapp/src/hooks/services/Experiment/ExperimentService.test.tsx b/airbyte-webapp/src/hooks/services/Experiment/ExperimentService.test.tsx
index 67c422a3185c..39c9e5bad9f3 100644
--- a/airbyte-webapp/src/hooks/services/Experiment/ExperimentService.test.tsx
+++ b/airbyte-webapp/src/hooks/services/Experiment/ExperimentService.test.tsx
@@ -21,7 +21,7 @@ const getExperiment: ExperimentService["getExperiment"] = (key): any => {
 describe("ExperimentService", () => {
   describe("useExperiment", () => {
     it("should return the value from the ExperimentService if provided", () => {
-      const wrapper: React.FC = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
         <ExperimentProvider
           value={{
             getExperiment,
@@ -36,7 +36,7 @@ describe("ExperimentService", () => {
     });
 
     it("should return the defaultValue if ExperimentService provides undefined", () => {
-      const wrapper: React.FC = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         <ExperimentProvider value={{ getExperiment: () => undefined as any, getExperimentChanges$: () => EMPTY }}>
           {children}
@@ -53,7 +53,7 @@ describe("ExperimentService", () => {
 
     it("should rerender whenever the ExperimentService emits a new value", () => {
       const subject = new Subject<TestExperimentValueType>();
-      const wrapper: React.FC = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         <ExperimentProvider value={{ getExperiment, getExperimentChanges$: () => subject.asObservable() as any }}>
           {children}
diff --git a/airbyte-webapp/src/hooks/services/Feature/FeatureService.test.tsx b/airbyte-webapp/src/hooks/services/Feature/FeatureService.test.tsx
index 4d4708b9c9ed..7eaf61ccd256 100644
--- a/airbyte-webapp/src/hooks/services/Feature/FeatureService.test.tsx
+++ b/airbyte-webapp/src/hooks/services/Feature/FeatureService.test.tsx
@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import { FeatureService, IfFeatureEnabled, useFeature, useFeatureService } from "./FeatureService";
 import { FeatureItem, FeatureSet } from "./types";
 
-const wrapper: React.FC = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <FeatureService features={[FeatureItem.AllowCreateConnection, FeatureItem.AllowSync]}>{children}</FeatureService>
 );
 
@@ -23,7 +23,7 @@ interface FeatureOverwrites {
  */
 const getFeatures = (initialProps: FeatureOverwrites) => {
   return renderHook(
-    ({ overwrite, user, workspace }: FeatureOverwrites) => {
+    ({ overwrite, user, workspace }: React.PropsWithChildren<FeatureOverwrites>) => {
       const { features, setWorkspaceFeatures, setUserFeatures, setFeatureOverwrites } = useFeatureService();
       useEffect(() => {
         setWorkspaceFeatures(workspace);
diff --git a/airbyte-webapp/src/hooks/services/Feature/FeatureService.tsx b/airbyte-webapp/src/hooks/services/Feature/FeatureService.tsx
index 7ede4dc9cce2..00bbc3693298 100644
--- a/airbyte-webapp/src/hooks/services/Feature/FeatureService.tsx
+++ b/airbyte-webapp/src/hooks/services/Feature/FeatureService.tsx
@@ -31,7 +31,10 @@ interface FeatureServiceProps {
  * features is: overwrite > user > workspace > globally, i.e. if a feature is disabled for a user
  * it will take precedence over the feature being enabled globally or for that workspace.
  */
-export const FeatureService: React.FC<FeatureServiceProps> = ({ features: defaultFeatures, children }) => {
+export const FeatureService: React.FC<React.PropsWithChildren<FeatureServiceProps>> = ({
+  features: defaultFeatures,
+  children,
+}) => {
   const [workspaceFeatures, setWorkspaceFeaturesState] = useState<FeatureSet>();
   const [userFeatures, setUserFeaturesState] = useState<FeatureSet>();
   const [overwrittenFeatures, setOverwrittenFeaturesState] = useState<FeatureSet>();
@@ -92,7 +95,10 @@ export const useFeature = (feature: FeatureItem): boolean => {
   return features.includes(feature);
 };
 
-export const IfFeatureEnabled: React.FC<{ feature: FeatureItem }> = ({ feature, children }) => {
+export const IfFeatureEnabled: React.FC<React.PropsWithChildren<{ feature: FeatureItem }>> = ({
+  feature,
+  children,
+}) => {
   const hasFeature = useFeature(feature);
   return hasFeature ? <>{children}</> : null;
 };
diff --git a/airbyte-webapp/src/hooks/services/FormChangeTracker/FormChangeTrackerService.tsx b/airbyte-webapp/src/hooks/services/FormChangeTracker/FormChangeTrackerService.tsx
index 44a7af138434..bbef2e49ad3d 100644
--- a/airbyte-webapp/src/hooks/services/FormChangeTracker/FormChangeTrackerService.tsx
+++ b/airbyte-webapp/src/hooks/services/FormChangeTracker/FormChangeTrackerService.tsx
@@ -7,7 +7,7 @@ import { useBlocker } from "hooks/router/useBlocker";
 import { useConfirmationModalService } from "../ConfirmationModal";
 import { useChangedFormsById } from "./hooks";
 
-export const FormChangeTrackerService: React.FC = ({ children }) => {
+export const FormChangeTrackerService: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const [changedFormsById, setChangedFormsById] = useChangedFormsById();
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
 
diff --git a/airbyte-webapp/src/hooks/services/Modal/ModalService.tsx b/airbyte-webapp/src/hooks/services/Modal/ModalService.tsx
index 398357690187..06c9d88bcefd 100644
--- a/airbyte-webapp/src/hooks/services/Modal/ModalService.tsx
+++ b/airbyte-webapp/src/hooks/services/Modal/ModalService.tsx
@@ -7,7 +7,7 @@ import { ModalOptions, ModalResult, ModalServiceContext } from "./types";
 
 const modalServiceContext = React.createContext<ModalServiceContext | undefined>(undefined);
 
-export const ModalServiceProvider: React.FC = ({ children }) => {
+export const ModalServiceProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   // The any here is due to the fact, that every call to open a modal might come in with
   // a different type, thus we can't type this with unknown or a generic.
   // The consuming code of this service though is properly typed, so that this `any` stays
diff --git a/airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx b/airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx
index 54ca702319ea..548fc0443533 100644
--- a/airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx
+++ b/airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx
@@ -14,7 +14,7 @@ interface Context {
 
 export const OnboardingServiceContext = React.createContext<Context | null>(null);
 
-export const OnboardingServiceProvider: React.FC = ({ children }) => {
+export const OnboardingServiceProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const workspace = useCurrentWorkspace();
   const [feedbackPassed, setFeedbackPassed] = useLocalStorage<boolean>(`${workspace.workspaceId}/passFeedback`, false);
   const [skippedUseCases, setSkippedUseCases] = useLocalStorage<string[]>(
diff --git a/airbyte-webapp/src/packages/cloud/App.tsx b/airbyte-webapp/src/packages/cloud/App.tsx
index 0cbc03e551f9..0411f22abfc7 100644
--- a/airbyte-webapp/src/packages/cloud/App.tsx
+++ b/airbyte-webapp/src/packages/cloud/App.tsx
@@ -26,14 +26,14 @@ import { IntercomProvider } from "./services/thirdParty/intercom/IntercomProvide
 
 const messages = { ...en, ...cloudLocales };
 
-const StyleProvider: React.FC = ({ children }) => (
+const StyleProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <ThemeProvider theme={theme}>
     <GlobalStyle />
     {children}
   </ThemeProvider>
 );
 
-const Services: React.FC = ({ children }) => (
+const Services: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <AnalyticsProvider>
     <ApiErrorBoundary>
       <NotificationServiceProvider>
diff --git a/airbyte-webapp/src/packages/cloud/services/AppServicesProvider.tsx b/airbyte-webapp/src/packages/cloud/services/AppServicesProvider.tsx
index 981c56c8ecf2..8d5ffad13442 100644
--- a/airbyte-webapp/src/packages/cloud/services/AppServicesProvider.tsx
+++ b/airbyte-webapp/src/packages/cloud/services/AppServicesProvider.tsx
@@ -17,7 +17,7 @@ import { FirebaseSdkProvider } from "./FirebaseSdkProvider";
  * It initializes all required services for app to work
  * and also adds all overrides of hooks/services
  */
-const AppServicesProvider: React.FC = ({ children }) => {
+const AppServicesProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <ServicesProvider>
       <FirebaseSdkProvider>
@@ -27,7 +27,7 @@ const AppServicesProvider: React.FC = ({ children }) => {
   );
 };
 
-const ServiceOverrides: React.FC = React.memo(({ children }) => {
+const ServiceOverrides: React.FC<React.PropsWithChildren<unknown>> = React.memo(({ children }) => {
   const auth = useAuth();
 
   const middlewares: RequestMiddleware[] = useMemo(
diff --git a/airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx b/airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx
index 4f529836348b..9360e343b585 100644
--- a/airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx
+++ b/airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx
@@ -21,7 +21,7 @@ const configProviders: ValueProvider<Config> = [
  * This Provider is responsible for injecting config in context and loading
  * all required subconfigs if necessary
  */
-const ConfigProvider: React.FC = ({ children }) => (
+const ConfigProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <ConfigServiceProvider defaultConfig={defaultConfig} providers={configProviders}>
     {children}
   </ConfigServiceProvider>
diff --git a/airbyte-webapp/src/packages/cloud/services/FirebaseSdkProvider.tsx b/airbyte-webapp/src/packages/cloud/services/FirebaseSdkProvider.tsx
index 91ccdfda43c7..5c0c5400973c 100644
--- a/airbyte-webapp/src/packages/cloud/services/FirebaseSdkProvider.tsx
+++ b/airbyte-webapp/src/packages/cloud/services/FirebaseSdkProvider.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { useConfig } from "packages/cloud/services/config";
 import { FirebaseAppProvider, useFirebaseApp, AuthProvider } from "packages/firebaseReact";
 
-const FirebaseAppSdksProvider: React.FC = ({ children }) => {
+const FirebaseAppSdksProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const config = useConfig();
   const firebaseApp = useFirebaseApp();
   const auth = getAuth(firebaseApp);
@@ -19,7 +19,7 @@ const FirebaseAppSdksProvider: React.FC = ({ children }) => {
  * This Provider is responsible for injecting firebase app
  * based on airbyte app config and also injecting all required firebase sdks
  */
-const FirebaseSdkProvider: React.FC = ({ children }) => {
+const FirebaseSdkProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const config = useConfig();
 
   return (
diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx
index f4c41ed49698..539ac9f276a4 100644
--- a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx
+++ b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx
@@ -67,7 +67,7 @@ interface AuthContextApi {
 
 export const AuthContext = React.createContext<AuthContextApi | null>(null);
 
-export const AuthenticationProvider: React.FC = ({ children }) => {
+export const AuthenticationProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const [state, { loggedIn, emailVerified, authInited, loggedOut, updateUserName }] = useTypesafeReducer<
     AuthServiceState,
     typeof actions
diff --git a/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/IntercomProvider.tsx b/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/IntercomProvider.tsx
index f041094f53fe..b9dbc9ade99c 100644
--- a/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/IntercomProvider.tsx
+++ b/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/IntercomProvider.tsx
@@ -3,7 +3,7 @@ import { IntercomProvider as IntercomProviderCore } from "react-use-intercom";
 
 import { useConfig } from "packages/cloud/services/config";
 
-const IntercomProvider: React.FC = ({ children }) => {
+const IntercomProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const config = useConfig();
 
   return <IntercomProviderCore appId={config.intercom.appId}>{children}</IntercomProviderCore>;
diff --git a/airbyte-webapp/src/packages/cloud/services/thirdParty/launchdarkly/LDExperimentService.tsx b/airbyte-webapp/src/packages/cloud/services/thirdParty/launchdarkly/LDExperimentService.tsx
index 5d2a7202443d..2aa21ae45452 100644
--- a/airbyte-webapp/src/packages/cloud/services/thirdParty/launchdarkly/LDExperimentService.tsx
+++ b/airbyte-webapp/src/packages/cloud/services/thirdParty/launchdarkly/LDExperimentService.tsx
@@ -41,7 +41,7 @@ function mapUserToLDUser(user: User | null, locale: string): LDClient.LDUser {
       };
 }
 
-const LDInitializationWrapper: React.FC<{ apiKey: string }> = ({ children, apiKey }) => {
+const LDInitializationWrapper: React.FC<React.PropsWithChildren<{ apiKey: string }>> = ({ children, apiKey }) => {
   const { setFeatureOverwrites } = useFeatureService();
   const ldClient = useRef<LDClient.LDClient>();
   const [state, setState] = useState<LDInitState>("initializing");
@@ -169,7 +169,7 @@ const LDInitializationWrapper: React.FC<{ apiKey: string }> = ({ children, apiKe
   return <ExperimentProvider value={experimentService}>{children}</ExperimentProvider>;
 };
 
-export const LDExperimentServiceProvider: React.FC = ({ children }) => {
+export const LDExperimentServiceProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const { launchDarkly: launchdarklyKey } = useConfig();
 
   return !launchdarklyKey ? (
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx
index 81949dd34ebd..4b6c5abb96aa 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx
@@ -169,7 +169,7 @@ export const SignupButton: React.FC<SignupButtonProps> = ({
   </LoadingButton>
 );
 
-export const SignupFormStatusMessage: React.FC = ({ children }) => (
+export const SignupFormStatusMessage: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <div className={styles.statusMessage}>{children}</div>
 );
 
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/FormContent.tsx b/airbyte-webapp/src/packages/cloud/views/auth/components/FormContent.tsx
index 5b217c7d9802..e35940d995e1 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/components/FormContent.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/auth/components/FormContent.tsx
@@ -23,7 +23,7 @@ interface FormContentProps {
   toLogin?: boolean;
 }
 
-const FormContent: React.FC<FormContentProps> = ({ toLogin, children }) => {
+const FormContent: React.FC<React.PropsWithChildren<FormContentProps>> = ({ toLogin, children }) => {
   const hideSelfHostedCTA = useExperiment("authPage.hideSelfHostedCTA", false);
 
   return (
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx b/airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx
index f0f86c2da63c..6750cc06307a 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx
@@ -4,7 +4,7 @@ import { Text } from "components/base/Text";
 
 import styles from "./FormTitle.module.scss";
 
-export const FormTitle: React.FC = ({ children }) => (
+export const FormTitle: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <Text as="h1" size="xl" className={styles.title}>
     {children}
   </Text>
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/MainView/InsufficientPermissionsErrorBoundary.tsx b/airbyte-webapp/src/packages/cloud/views/layout/MainView/InsufficientPermissionsErrorBoundary.tsx
index cb792d2c381c..34d244176574 100644
--- a/airbyte-webapp/src/packages/cloud/views/layout/MainView/InsufficientPermissionsErrorBoundary.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/layout/MainView/InsufficientPermissionsErrorBoundary.tsx
@@ -13,7 +13,7 @@ const initialState: BoundaryState = {
 };
 
 export class InsufficientPermissionsErrorBoundary extends React.Component<
-  { errorComponent: React.ReactElement },
+  React.PropsWithChildren<{ errorComponent: React.ReactElement }>,
   BoundaryState
 > {
   static getDerivedStateFromError(error: CommonRequestError): BoundaryState {
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx
index 68294a0851ef..9217d92ee9ca 100644
--- a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx
@@ -17,7 +17,7 @@ import { StartOverErrorView } from "views/common/StartOverErrorView";
 import { InsufficientPermissionsErrorBoundary } from "./InsufficientPermissionsErrorBoundary";
 import styles from "./MainView.module.scss";
 
-const MainView: React.FC = (props) => {
+const MainView: React.FC<React.PropsWithChildren<unknown>> = (props) => {
   const { formatMessage } = useIntl();
   const workspace = useCurrentWorkspace();
   const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId);
diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx
index 401ea7522b53..14bf1f8cc7d4 100644
--- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx
@@ -70,7 +70,11 @@ type MenuWithRequestButtonProps = MenuListProps<IDataItem, boolean> & {
   selectedWorkspace: string;
 };
 
-const WorkspacesList: React.FC<MenuWithRequestButtonProps> = ({ children, selectedWorkspace, ...props }) => {
+const WorkspacesList: React.FC<React.PropsWithChildren<MenuWithRequestButtonProps>> = ({
+  children,
+  selectedWorkspace,
+  ...props
+}) => {
   const { exitWorkspace } = useWorkspaceService();
 
   return (
diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx
index d280fb92dcc7..72fe32291e5a 100644
--- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx
@@ -6,7 +6,7 @@ import { H5 } from "components";
 
 import styles from "./WorkspaceItem.module.scss";
 
-const WorkspaceItem: React.FC<{ onClick: (id: string) => void; id: string }> = (props) => (
+const WorkspaceItem: React.FC<React.PropsWithChildren<{ onClick: (id: string) => void; id: string }>> = (props) => (
   <button className={styles.button} onClick={() => props.onClick(props.id)}>
     <H5 bold>{props.children}</H5>
     <FontAwesomeIcon className={styles.iconColor} icon={faChevronRight} />
diff --git a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
index ed799d341181..507a32845dd7 100644
--- a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
+++ b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
@@ -44,7 +44,7 @@ const useSelectWorkspace = (): ((workspace?: string | null | Workspace) => void)
   );
 };
 
-export const WorkspaceServiceProvider: React.FC = ({ children }) => {
+export const WorkspaceServiceProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const selectWorkspace = useSelectWorkspace();
 
   const ctx = useMemo<Context>(
diff --git a/airbyte-webapp/src/test-utils/testutils.tsx b/airbyte-webapp/src/test-utils/testutils.tsx
index 58980169b25b..ab8e558ea8d2 100644
--- a/airbyte-webapp/src/test-utils/testutils.tsx
+++ b/airbyte-webapp/src/test-utils/testutils.tsx
@@ -53,7 +53,7 @@ export async function render<
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return renderResult!;
 }
-export const TestWrapper: React.FC = ({ children }) => (
+export const TestWrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <ThemeProvider theme={{}}>
     <IntlProvider locale="en" messages={en} onError={() => null}>
       {children}
diff --git a/airbyte-webapp/src/utils/useTranslateDataType.test.tsx b/airbyte-webapp/src/utils/useTranslateDataType.test.tsx
index 037bdd6a957f..fdc007af9998 100644
--- a/airbyte-webapp/src/utils/useTranslateDataType.test.tsx
+++ b/airbyte-webapp/src/utils/useTranslateDataType.test.tsx
@@ -5,7 +5,7 @@ import { IntlProvider } from "react-intl";
 import messages from "../locales/en.json";
 import { AirbyteConnectorData, useTranslateDataType } from "./useTranslateDataType";
 
-const wrapper: React.FC = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <IntlProvider messages={messages} locale="en">
     {children}
   </IntlProvider>
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/DataTypeCell.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/components/DataTypeCell.tsx
index 7b1b1e2bad85..785d5fce0694 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/DataTypeCell.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogTree/components/DataTypeCell.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { Cell } from "components/SimpleTableComponents";
 
-const DataTypeCell: React.FC = ({ children }) => {
+const DataTypeCell: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return <Cell>{children}</Cell>;
 };
 
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx
index 0b773a483784..da0fb36cf6d6 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx
@@ -12,7 +12,11 @@ interface PathPopoutButtonProps {
   onClick: React.MouseEventHandler;
 }
 
-export const PathPopoutButton: React.FC<PathPopoutButtonProps> = ({ items = [], onClick, children }) => (
+export const PathPopoutButton: React.FC<React.PropsWithChildren<PathPopoutButtonProps>> = ({
+  items = [],
+  onClick,
+  children,
+}) => (
   <Tooltip
     control={
       <button className={styles.button} onClick={onClick}>
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/TreeRowWrapper.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/components/TreeRowWrapper.tsx
index 57046cc74a07..c74647f7a5d8 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/TreeRowWrapper.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogTree/components/TreeRowWrapper.tsx
@@ -18,7 +18,11 @@ const RowContent = styled(Row)`
   font-size: 12px;
 `;
 
-const TreeRowWrapper: React.FC<{ depth?: number; noBorder?: boolean }> = ({ depth, children, noBorder }) => (
+const TreeRowWrapper: React.FC<React.PropsWithChildren<{ depth?: number; noBorder?: boolean }>> = ({
+  depth,
+  children,
+  noBorder,
+}) => (
   <RowWrapper depth={depth} noBorder={noBorder}>
     <RowContent>{children}</RowContent>
   </RowWrapper>
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
index 20835d2d9afc..89147975a657 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -79,7 +79,7 @@ const LabelHeading = styled(H5)`
   display: inline;
 `;
 
-const Section: React.FC<SectionProps> = ({ title, children }) => (
+const Section: React.FC<React.PropsWithChildren<SectionProps>> = ({ title, children }) => (
   <Card>
     <StyledSection>
       {title && <H5 bold>{title}</H5>}
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
index 70e6bf60f739..144d5f07f859 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
@@ -15,7 +15,7 @@ interface OperationsSectionProps {
   destDefinition: DestinationDefinitionSpecificationRead;
   onStartEditTransformation?: () => void;
   onEndEditTransformation?: () => void;
-  wrapper: React.ComponentType;
+  wrapper: React.ComponentType<React.PropsWithChildren<unknown>>;
 }
 
 export const OperationsSection: React.FC<OperationsSectionProps> = ({
diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
index 84ec8682c0f4..9f8d2573f85e 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
@@ -34,7 +34,7 @@ interface ConnectorCardEditProps extends ConnectorCardBaseProps {
   connector: ConnectorT;
 }
 
-export const ConnectorCard: React.VFC<ConnectorCardCreateProps | ConnectorCardEditProps> = ({
+export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEditProps> = ({
   title,
   full,
   jobInfo,
diff --git a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx
index e942a6ffac33..46a2e4643ad5 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx
@@ -57,7 +57,7 @@ const RightPanelContainer: React.FC<React.PropsWithChildren<PanelContainerProps>
 };
 // NOTE: ReflexElement will not load its contents if wrapped in an empty jsx tag along with ReflexSplitter.  They must be evaluated/rendered separately.
 
-export const ConnectorDocumentationLayout: React.FC = ({ children }) => {
+export const ConnectorDocumentationLayout: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const { documentationPanelOpen } = useDocumentationPanelContext();
   const screenWidth = useWindowSize().width;
 
diff --git a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationWrapper.tsx b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationWrapper.tsx
index c1d142c57682..a287a5883dba 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationWrapper.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationWrapper.tsx
@@ -1,7 +1,7 @@
 import { ConnectorDocumentationLayout } from "./ConnectorDocumentationLayout";
 import { DocumentationPanelProvider } from "./DocumentationPanelContext";
 
-export const ConnectorDocumentationWrapper: React.FC = ({ children }) => {
+export const ConnectorDocumentationWrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <DocumentationPanelProvider>
       <ConnectorDocumentationLayout>{children}</ConnectorDocumentationLayout>
diff --git a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx
index 4fe777e531a8..b20b17164034 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx
@@ -31,7 +31,7 @@ export const documentationPanelContext = createContext<DocumentationPanelContext
 
 export const useDocumentationPanelContext = () => useContext(documentationPanelContext);
 
-export const DocumentationPanelProvider: React.FC = ({ children }) => {
+export const DocumentationPanelProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <documentationPanelContext.Provider value={useDocumentationPanelState()}>
       {children}
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
index 1b75d8142f0d..4c9e1ce31984 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
@@ -99,7 +99,7 @@ function getOrderForReleaseStage(stage?: ReleaseStage): number {
   }
 }
 
-const ConnectorList: React.FC<MenuWithRequestButtonProps> = ({ children, ...props }) => (
+const ConnectorList: React.FC<React.PropsWithChildren<MenuWithRequestButtonProps>> = ({ children, ...props }) => (
   <>
     <components.MenuList {...props}>{children}</components.MenuList>
     <BottomElement>
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/Label.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/Label.tsx
index 08504af08ca4..7b2f85900a51 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/Label.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/Label.tsx
@@ -12,7 +12,7 @@ interface LabelMessageProps {
   touched: boolean;
 }
 
-const Label: React.FC<LabelMessageProps> = ({ property, error, touched, children }) => {
+const Label: React.FC<React.PropsWithChildren<LabelMessageProps>> = ({ property, error, touched, children }) => {
   const labelText = property.title || property.fieldKey;
   const labelRequiredAppendix = property.isRequired ? " *" : "";
   const label = `${labelText}${labelRequiredAppendix}`;
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelMessage.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelMessage.tsx
index b3e79dc89fbd..c3e61f959de4 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelMessage.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelMessage.tsx
@@ -17,7 +17,7 @@ const LabelMessage: React.FC<IProps> = ({ property, error, touched }) => {
       return null;
     }
 
-    const exampleText = Array.isArray(property.examples) ? property.examples?.join(", ") : property.examples;
+    const exampleText = Array.isArray(property.examples) ? property.examples?.join(", ") : String(property.examples);
 
     return <FormattedMessage id="form.examples" values={{ examples: exampleText }} />;
   };
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/GoogleAuthButton.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/GoogleAuthButton.tsx
index 37225a1d3b31..a3871e6c0788 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/GoogleAuthButton.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/GoogleAuthButton.tsx
@@ -41,7 +41,7 @@ const Img = styled.img`
   height: 40px;
 `;
 
-const GoogleAuthButton: React.FC = (props) => (
+const GoogleAuthButton: React.FC<React.PropsWithChildren<unknown>> = (props) => (
   <StyledButton {...props}>
     <Img src="/connectors/google/btn_google_light_normal_ios.svg" alt="Sign in with Google" />
     {props.children}
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/serviceFormContext.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/serviceFormContext.tsx
index 47b359f0b0c4..820be4fc64e8 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/serviceFormContext.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/serviceFormContext.tsx
@@ -51,7 +51,7 @@ interface ServiceFormContextProviderProps {
   validationSchema: AnySchema;
 }
 
-export const ServiceFormContextProvider: React.FC<ServiceFormContextProviderProps> = ({
+export const ServiceFormContextProvider: React.FC<React.PropsWithChildren<ServiceFormContextProviderProps>> = ({
   availableServices,
   children,
   widgetsInfo,
diff --git a/airbyte-webapp/src/views/common/AnalyticsProvider.tsx b/airbyte-webapp/src/views/common/AnalyticsProvider.tsx
index af63daacf5c4..fe8a30b37b27 100644
--- a/airbyte-webapp/src/views/common/AnalyticsProvider.tsx
+++ b/airbyte-webapp/src/views/common/AnalyticsProvider.tsx
@@ -4,7 +4,7 @@ import { useConfig } from "config";
 import AnalyticsServiceProvider from "hooks/services/Analytics/useAnalyticsService";
 import useSegment from "hooks/useSegment";
 
-const AnalyticsProvider: React.FC = ({ children }) => {
+const AnalyticsProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const config = useConfig();
   useSegment(config.segment.enabled ? config.segment.token : "");
 
diff --git a/airbyte-webapp/src/views/common/ResorceNotFoundErrorBoundary.tsx b/airbyte-webapp/src/views/common/ResorceNotFoundErrorBoundary.tsx
index 7b3c471e79fe..d7193714d63c 100644
--- a/airbyte-webapp/src/views/common/ResorceNotFoundErrorBoundary.tsx
+++ b/airbyte-webapp/src/views/common/ResorceNotFoundErrorBoundary.tsx
@@ -14,7 +14,7 @@ const initialState: BoundaryState = {
 };
 
 export class ResourceNotFoundErrorBoundary extends React.Component<
-  { errorComponent: React.ReactElement },
+  React.PropsWithChildren<{ errorComponent: React.ReactElement }>,
   BoundaryState
 > {
   static getDerivedStateFromError(error: CommonRequestError): BoundaryState {
diff --git a/airbyte-webapp/src/views/common/StoreProvider.tsx b/airbyte-webapp/src/views/common/StoreProvider.tsx
index 8c7c5d7c78d9..deb6058dde44 100644
--- a/airbyte-webapp/src/views/common/StoreProvider.tsx
+++ b/airbyte-webapp/src/views/common/StoreProvider.tsx
@@ -12,7 +12,7 @@ const queryClient = new QueryClient({
   },
 });
 
-const StoreProvider: React.FC = ({ children }) => (
+const StoreProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
     {children}
diff --git a/airbyte-webapp/src/views/layout/MainView/MainView.tsx b/airbyte-webapp/src/views/layout/MainView/MainView.tsx
index 4a5f4a49e767..d26e9fa76fc8 100644
--- a/airbyte-webapp/src/views/layout/MainView/MainView.tsx
+++ b/airbyte-webapp/src/views/layout/MainView/MainView.tsx
@@ -22,7 +22,7 @@ const Content = styled.div`
   height: 100%;
 `;
 
-const MainView: React.FC = (props) => (
+const MainView: React.FC<React.PropsWithChildren<unknown>> = (props) => (
   <MainContainer>
     <SideBar />
     <Content>