diff --git a/.changeset/silver-walls-compete.md b/.changeset/silver-walls-compete.md
new file mode 100644
index 00000000000..f3a2b0a5555
--- /dev/null
+++ b/.changeset/silver-walls-compete.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update types to support TypeScript v4.8.3
diff --git a/package-lock.json b/package-lock.json
index 6e7f0e4aba2..c621a03bb9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@primer/react",
-  "version": "35.10.0",
+  "version": "35.11.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@primer/react",
-      "version": "35.10.0",
+      "version": "35.11.0",
       "license": "MIT",
       "dependencies": {
         "@github/combobox-nav": "^2.1.5",
@@ -132,7 +132,7 @@
         "storybook-addon-turbo-build": "1.1.0",
         "styled-components": "4.4.1",
         "ts-toolbelt": "9.6.0",
-        "typescript": "4.5.4",
+        "typescript": "4.8.3",
         "webpack": "5.74.0"
       },
       "engines": {
@@ -41309,9 +41309,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -74372,9 +74372,9 @@
       }
     },
     "typescript": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
       "dev": true
     },
     "uglify-js": {
diff --git a/package.json b/package.json
index ff088c3df2f..24030770bb7 100644
--- a/package.json
+++ b/package.json
@@ -201,7 +201,7 @@
     "storybook-addon-turbo-build": "1.1.0",
     "styled-components": "4.4.1",
     "ts-toolbelt": "9.6.0",
-    "typescript": "4.5.4",
+    "typescript": "4.8.3",
     "webpack": "5.74.0"
   },
   "peerDependencies": {
diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx
index 8ebe308e45b..d9971d8cbd5 100644
--- a/src/AvatarPair.tsx
+++ b/src/AvatarPair.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import Avatar from './Avatar'
+import Avatar, {AvatarProps} from './Avatar'
 import {get} from './constants'
 import Box, {BoxProps} from './Box'
 
@@ -15,13 +15,17 @@ export type AvatarPairProps = BoxProps
 
 const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
   const avatars = React.Children.map(children, (child, i) => {
-    if (!React.isValidElement(child)) return child
-    return i === 0 ? (
-      React.cloneElement(child, {size: 40})
-    ) : (
-      <ChildAvatar bg="canvas.default" {...child.props} size={20} />
-    )
+    if (!React.isValidElement(child)) {
+      return child
+    }
+
+    if (i === 0) {
+      return React.cloneElement(child as React.ReactElement<AvatarProps>, {size: 40})
+    }
+
+    return <ChildAvatar bg="canvas.default" {...child.props} size={20} />
   })
+
   return (
     <Box position="relative" display="inline-flex" {...rest}>
       {avatars}
diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx
index c344ddc5b24..a50bb304aba 100644
--- a/src/FormControl/FormControl.tsx
+++ b/src/FormControl/FormControl.tsx
@@ -9,7 +9,7 @@ import TextInput from '../TextInput'
 import TextInputWithTokens from '../TextInputWithTokens'
 import {useSSRSafeId} from '../utils/ssr'
 import FormControlCaption from './_FormControlCaption'
-import FormControlLabel from './_FormControlLabel'
+import FormControlLabel, {Props as FormControlLabelProps} from './_FormControlLabel'
 import FormControlValidation from './_FormControlValidation'
 import {Slots} from './slots'
 import ValidationAnimationContainer from '../_ValidationAnimationContainer'
@@ -149,11 +149,18 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             <Box ref={ref} display="flex" alignItems={slots.LeadingVisual ? 'center' : undefined} sx={sx}>
               <Box sx={{'> input': {marginLeft: 0, marginRight: 0}}}>
                 {React.isValidElement(InputComponent) &&
-                  React.cloneElement(InputComponent, {
-                    id,
-                    disabled,
-                    ['aria-describedby']: captionId
-                  })}
+                  React.cloneElement(
+                    InputComponent as React.ReactElement<{
+                      id: string
+                      disabled: boolean
+                      ['aria-describedby']: string
+                    }>,
+                    {
+                      id,
+                      disabled,
+                      ['aria-describedby']: captionId as string
+                    }
+                  )}
                 {React.Children.toArray(children).filter(
                   child =>
                     React.isValidElement(child) &&
@@ -175,7 +182,10 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
                   {slots.LeadingVisual}
                 </Box>
               )}
-              {(React.isValidElement(slots.Label) && !slots.Label.props.visuallyHidden) || slots.Caption ? (
+              {(React.isValidElement(slots.Label) &&
+                slots.Label.type === FormControlLabel &&
+                !(slots.Label.props as FormControlLabelProps).visuallyHidden) ||
+              slots.Caption ? (
                 <Box display="flex" flexDirection="column" ml={2}>
                   {slots.Label}
                   {slots.Caption}
@@ -197,14 +207,19 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             >
               {slots.Label}
               {React.isValidElement(InputComponent) &&
-                React.cloneElement(InputComponent, {
-                  id,
-                  required,
-                  disabled,
-                  validationStatus,
-                  ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
-                  ...InputComponent.props
-                })}
+                React.cloneElement(
+                  InputComponent,
+                  Object.assign(
+                    {
+                      id,
+                      required,
+                      disabled,
+                      validationStatus,
+                      ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' ')
+                    },
+                    InputComponent.props
+                  )
+                )}
               {React.Children.toArray(children).filter(
                 child =>
                   React.isValidElement(child) &&
diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
index 8f762d1c513..7fbb456a57f 100644
--- a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
@@ -24,23 +24,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
   margin-right: 0;
 }
 
-.c7 {
-  margin-left: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
 .c2 {
   display: block;
   font-size: 16px;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   font-size: 14px;
   display: block;
@@ -125,17 +114,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
             value="one"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-2"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-2"
-          >
-            Choice one
-          </label>
-        </div>
+          Choice one
+        </label>
       </div>
       <div
         className="c4"
@@ -157,17 +141,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
             value="two"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-3"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-3"
-          >
-            Choice two
-          </label>
-        </div>
+          Choice two
+        </label>
       </div>
       <div
         className="c4"
@@ -189,17 +168,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
             value="three"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-4"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-4"
-          >
-            Choice three
-          </label>
-        </div>
+          Choice three
+        </label>
       </div>
     </div>
   </fieldset>
diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
index 035bafc69c7..d7c6179f2b2 100644
--- a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
@@ -24,23 +24,12 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
   margin-right: 0;
 }
 
-.c7 {
-  margin-left: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
 .c2 {
   display: block;
   font-size: 16px;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   font-size: 14px;
   display: block;
@@ -125,17 +114,12 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             value="choiceOne"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-2"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-2"
-          >
-            Choice one
-          </label>
-        </div>
+          Choice one
+        </label>
       </div>
       <div
         className="c4"
@@ -157,17 +141,12 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             value="choiceTwo"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-3"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-3"
-          >
-            Choice two
-          </label>
-        </div>
+          Choice two
+        </label>
       </div>
       <div
         className="c4"
@@ -189,17 +168,12 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             value="choiceThree"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-4"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-4"
-          >
-            Choice three
-          </label>
-        </div>
+          Choice three
+        </label>
       </div>
     </div>
   </fieldset>
diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
index a26bf50a45f..55024b35060 100644
--- a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -24,23 +24,12 @@ exports[`RadioGroup renders consistently 1`] = `
   margin-right: 0;
 }
 
-.c7 {
-  margin-left: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
 .c2 {
   display: block;
   font-size: 16px;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   font-size: 14px;
   display: block;
@@ -125,17 +114,12 @@ exports[`RadioGroup renders consistently 1`] = `
             value="one"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-2"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-2"
-          >
-            Choice one
-          </label>
-        </div>
+          Choice one
+        </label>
       </div>
       <div
         className="c4"
@@ -157,17 +141,12 @@ exports[`RadioGroup renders consistently 1`] = `
             value="two"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-3"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-3"
-          >
-            Choice two
-          </label>
-        </div>
+          Choice two
+        </label>
       </div>
       <div
         className="c4"
@@ -189,17 +168,12 @@ exports[`RadioGroup renders consistently 1`] = `
             value="three"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-4"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-4"
-          >
-            Choice three
-          </label>
-        </div>
+          Choice three
+        </label>
       </div>
     </div>
   </fieldset>
diff --git a/src/deprecated/ChoiceInputField.tsx b/src/deprecated/ChoiceInputField.tsx
index d9451ccda68..5d80bac7861 100644
--- a/src/deprecated/ChoiceInputField.tsx
+++ b/src/deprecated/ChoiceInputField.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Box, Checkbox, Radio, useSSRSafeId} from '..'
+import {Box, Checkbox, CheckboxProps, Radio, RadioProps, useSSRSafeId} from '..'
 import {get} from '../constants'
 import {Slots} from './InputField/slots'
 import ChoiceInputLeadingVisual from './_ChoiceInputLeadingVisual'
@@ -86,7 +86,7 @@ const ChoiceInputField: React.FC<React.PropsWithChildren<Props>> = ({
           <Box display="flex" alignItems={slots.LeadingVisual ? 'center' : undefined}>
             <Box sx={{'> input': {marginLeft: 0, marginRight: 0}}}>
               {React.isValidElement(ChoiceInput) &&
-                React.cloneElement(ChoiceInput, {
+                React.cloneElement(ChoiceInput as React.ReactElement<CheckboxProps | RadioProps>, {
                   id,
                   disabled,
                   ['aria-describedby']: captionId
diff --git a/src/deprecated/InputField/InputField.tsx b/src/deprecated/InputField/InputField.tsx
index 2aeb961d22b..426f9936759 100644
--- a/src/deprecated/InputField/InputField.tsx
+++ b/src/deprecated/InputField/InputField.tsx
@@ -134,12 +134,20 @@ const InputField = <T extends Record<string, FormValidationStatus>>({
             )}
             {slots.Label}
             {React.isValidElement(InputComponent) &&
-              React.cloneElement(InputComponent, {
-                id,
-                required,
-                disabled,
-                ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' ')
-              })}
+              React.cloneElement(
+                InputComponent as React.ReactElement<{
+                  id: string
+                  required: boolean
+                  disabled: boolean
+                  ['aria-describedby']: string
+                }>,
+                {
+                  id,
+                  required,
+                  disabled,
+                  ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' ')
+                }
+              )}
             {validationChildToRender && validationMap && validationResult && validationMessageId && (
               <ValidationAnimationContainer show>
                 <InputValidation validationStatus={validationMap[validationResult]} id={validationMessageId}>