From a2317c59173a20b7b1e5aadf08d1e71c3f460200 Mon Sep 17 00:00:00 2001
From: Cody Olsen <81981+stipsan@users.noreply.github.com>
Date: Tue, 7 Jan 2025 13:40:54 +0100
Subject: [PATCH] fix: refactor `ReactElement` to `JSX.Element` types (#1555)

---
 .../autocomplete/__workshop__/constrainedHeight.tsx        | 2 +-
 src/core/components/autocomplete/autocomplete.tsx          | 7 +++----
 src/core/components/autocomplete/autocompleteOption.tsx    | 2 +-
 src/core/components/dialog/dialogProvider.tsx              | 2 +-
 src/core/components/menu/__workshop__/asComponent.tsx      | 2 +-
 src/core/components/menu/menuButton.tsx                    | 4 ++--
 src/core/components/menu/menuGroup.tsx                     | 2 +-
 src/core/components/tab/tabList.tsx                        | 4 ++--
 src/core/components/toast/toast.tsx                        | 2 +-
 src/core/components/toast/toastProvider.tsx                | 2 +-
 src/core/components/tree/tree.tsx                          | 2 +-
 src/core/components/tree/treeGroup.tsx                     | 2 +-
 src/core/components/tree/treeItem.tsx                      | 2 +-
 src/core/primitives/avatar/avatarStack.tsx                 | 2 +-
 src/core/primitives/card/__workshop__/asComponent.tsx      | 2 +-
 src/core/primitives/popover/__workshop__/TestStory.tsx     | 4 ++--
 src/core/primitives/popover/popover.tsx                    | 6 +++---
 src/core/primitives/tooltip/tooltip.tsx                    | 2 +-
 .../tooltipDelayGroup/tooltipDelayGroupProvider.tsx        | 2 +-
 src/core/theme/__workshop__/build/story.tsx                | 3 +--
 src/core/theme/themeColorProvider.tsx                      | 2 +-
 src/core/theme/themeProvider.tsx                           | 2 +-
 src/core/utils/arrow/arrow.tsx                             | 4 ++--
 src/core/utils/boundaryElement/boundaryElementProvider.tsx | 4 +---
 src/core/utils/layer/layerProvider.tsx                     | 2 +-
 src/core/utils/portal/portalProvider.tsx                   | 2 +-
 src/core/utils/virtualList/virtualList.tsx                 | 2 +-
 test/utils.tsx                                             | 4 ++--
 28 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx b/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx
index 2c392c2ac..85716b0f2 100644
--- a/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx
+++ b/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx
@@ -81,7 +81,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
     (
       popoverProps: {
-        content: React.ReactElement<any> | null
+        content: React.JSX.Element | null
         hidden: boolean
         inputElement: HTMLInputElement | null
         onMouseEnter: () => void
diff --git a/src/core/components/autocomplete/autocomplete.tsx b/src/core/components/autocomplete/autocomplete.tsx
index c4a80d56c..4946575c3 100644
--- a/src/core/components/autocomplete/autocomplete.tsx
+++ b/src/core/components/autocomplete/autocomplete.tsx
@@ -6,7 +6,6 @@ import {
   HTMLProps,
   KeyboardEvent,
   MouseEvent,
-  ReactElement,
   ReactNode,
   Ref,
   cloneElement,
@@ -73,11 +72,11 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   /** @beta */
   relatedElements?: HTMLElement[]
   /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => ReactElement<any>
+  renderOption?: (option: Option) => React.JSX.Element
   /** @beta */
   renderPopover?: (
     props: {
-      content: ReactElement<any> | null
+      content: React.JSX.Element | null
       hidden: boolean
       inputElement: HTMLInputElement | null
       onMouseEnter: () => void
@@ -726,4 +725,4 @@ export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocomplet
     > & {
       ref?: Ref<HTMLInputElement>
     },
-) => ReactElement<any>
+) => React.JSX.Element
diff --git a/src/core/components/autocomplete/autocompleteOption.tsx b/src/core/components/autocomplete/autocompleteOption.tsx
index b04d3f7aa..1de575bfb 100644
--- a/src/core/components/autocomplete/autocompleteOption.tsx
+++ b/src/core/components/autocomplete/autocompleteOption.tsx
@@ -9,7 +9,7 @@ export interface AutocompleteOptionProps {
   value: string
 }
 
-export function AutocompleteOption(props: AutocompleteOptionProps): React.ReactElement<any> {
+export function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {
   const {children, id, onSelect, selected, value} = props
 
   const handleClick = useCallback(() => {
diff --git a/src/core/components/dialog/dialogProvider.tsx b/src/core/components/dialog/dialogProvider.tsx
index f17cef3dd..c81288191 100644
--- a/src/core/components/dialog/dialogProvider.tsx
+++ b/src/core/components/dialog/dialogProvider.tsx
@@ -16,7 +16,7 @@ export interface DialogProviderProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function DialogProvider(props: DialogProviderProps): React.ReactElement<any> {
+export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
   const {children, position, zOffset} = props
 
   const contextValue: DialogContextValue = useMemo(
diff --git a/src/core/components/menu/__workshop__/asComponent.tsx b/src/core/components/menu/__workshop__/asComponent.tsx
index f9fc3ff07..258693327 100644
--- a/src/core/components/menu/__workshop__/asComponent.tsx
+++ b/src/core/components/menu/__workshop__/asComponent.tsx
@@ -4,7 +4,7 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (
diff --git a/src/core/components/menu/menuButton.tsx b/src/core/components/menu/menuButton.tsx
index ff3fd4fa4..144327b74 100644
--- a/src/core/components/menu/menuButton.tsx
+++ b/src/core/components/menu/menuButton.tsx
@@ -25,9 +25,9 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: React.ReactElement<any>
+  button: React.JSX.Element
   id: string
-  menu?: React.ReactElement<any>
+  menu?: React.JSX.Element
   onClose?: () => void
   onOpen?: () => void
   /**
diff --git a/src/core/components/menu/menuGroup.tsx b/src/core/components/menu/menuGroup.tsx
index a8874b6fc..9dee902af 100644
--- a/src/core/components/menu/menuGroup.tsx
+++ b/src/core/components/menu/menuGroup.tsx
@@ -41,7 +41,7 @@ export interface MenuGroupProps {
 export function MenuGroup(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
     MenuGroupProps,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {
     as = 'button',
     children,
diff --git a/src/core/components/tab/tabList.tsx b/src/core/components/tab/tabList.tsx
index 4e740f2a3..016092e28 100644
--- a/src/core/components/tab/tabList.tsx
+++ b/src/core/components/tab/tabList.tsx
@@ -6,7 +6,7 @@ import {Inline, InlineProps} from '../../primitives'
  * @public
  */
 export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.ReactElement<any> | null | undefined | false>
+  children: Array<React.JSX.Element | null | undefined | false>
 }
 
 //Limits the width of tabs in tablist
@@ -29,7 +29,7 @@ export const TabList = forwardRef(function TabList(
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {
diff --git a/src/core/components/toast/toast.tsx b/src/core/components/toast/toast.tsx
index 8e953a549..5956c5d17 100644
--- a/src/core/components/toast/toast.tsx
+++ b/src/core/components/toast/toast.tsx
@@ -53,7 +53,7 @@ const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneK
  */
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'
diff --git a/src/core/components/toast/toastProvider.tsx b/src/core/components/toast/toastProvider.tsx
index bb9552936..6d34eea24 100644
--- a/src/core/components/toast/toastProvider.tsx
+++ b/src/core/components/toast/toastProvider.tsx
@@ -49,7 +49,7 @@ const ToastContainer = styled.div`
 /**
  * @public
  */
-export function ToastProvider(props: ToastProviderProps): React.ReactElement<any> {
+export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
   const [state, _setState] = useState<ToastState>([])
   const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
diff --git a/src/core/components/tree/tree.tsx b/src/core/components/tree/tree.tsx
index b8dddaa71..4c2608f8a 100644
--- a/src/core/components/tree/tree.tsx
+++ b/src/core/components/tree/tree.tsx
@@ -30,7 +30,7 @@ export const Tree = memo(
     props: TreeProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement<any> {
+  ): React.JSX.Element {
     const {children, space = 1, onFocus, ...restProps} = props
     const ref = useRef<HTMLDivElement | null>(null)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
diff --git a/src/core/components/tree/treeGroup.tsx b/src/core/components/tree/treeGroup.tsx
index abecda54b..2a71170b8 100644
--- a/src/core/components/tree/treeGroup.tsx
+++ b/src/core/components/tree/treeGroup.tsx
@@ -9,7 +9,7 @@ export interface TreeGroupProps {
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()
 
diff --git a/src/core/components/tree/treeItem.tsx b/src/core/components/tree/treeItem.tsx
index 6a78dd007..2744d214e 100644
--- a/src/core/components/tree/treeItem.tsx
+++ b/src/core/components/tree/treeItem.tsx
@@ -46,7 +46,7 @@ const ToggleArrowText = styled(Text)`
  */
 export const TreeItem = memo(function TreeItem(
   props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {
     children,
     expanded: expandedProp = false,
diff --git a/src/core/primitives/avatar/avatarStack.tsx b/src/core/primitives/avatar/avatarStack.tsx
index 75d5e470e..ce7091777 100644
--- a/src/core/primitives/avatar/avatarStack.tsx
+++ b/src/core/primitives/avatar/avatarStack.tsx
@@ -68,7 +68,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 
diff --git a/src/core/primitives/card/__workshop__/asComponent.tsx b/src/core/primitives/card/__workshop__/asComponent.tsx
index 36e385989..5127d83c3 100644
--- a/src/core/primitives/card/__workshop__/asComponent.tsx
+++ b/src/core/primitives/card/__workshop__/asComponent.tsx
@@ -4,7 +4,7 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (
diff --git a/src/core/primitives/popover/__workshop__/TestStory.tsx b/src/core/primitives/popover/__workshop__/TestStory.tsx
index 0c81f3a84..cb0c15734 100644
--- a/src/core/primitives/popover/__workshop__/TestStory.tsx
+++ b/src/core/primitives/popover/__workshop__/TestStory.tsx
@@ -1,5 +1,5 @@
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {ReactElement, useRef, useState} from 'react'
+import {useRef, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -12,7 +12,7 @@ import {Text} from '../../text'
 import {Popover} from '../popover'
 import {PopoverUpdateCallback} from '../types'
 
-export default function TestStory(): ReactElement<any> {
+export default function TestStory(): React.JSX.Element {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
diff --git a/src/core/primitives/popover/popover.tsx b/src/core/primitives/popover/popover.tsx
index d5559d183..a34d7252b 100644
--- a/src/core/primitives/popover/popover.tsx
+++ b/src/core/primitives/popover/popover.tsx
@@ -59,7 +59,7 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement<any>
+  children?: React.JSX.Element
   /**
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
@@ -117,7 +117,7 @@ export const Popover = memo(
     props: PopoverProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement<any> {
+  ): React.JSX.Element {
     const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
@@ -449,7 +449,7 @@ Popover.displayName = 'Memo(ForwardRef(Popover))'
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-function getElementRef(element: React.ReactElement<any>) {
+function getElementRef(element: React.JSX.Element) {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
diff --git a/src/core/primitives/tooltip/tooltip.tsx b/src/core/primitives/tooltip/tooltip.tsx
index 6a9a10cd0..3da0d3002 100644
--- a/src/core/primitives/tooltip/tooltip.tsx
+++ b/src/core/primitives/tooltip/tooltip.tsx
@@ -47,7 +47,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   allowedAutoPlacements?: Placement[]
   arrow?: boolean
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement<any>
+  children?: React.JSX.Element
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
diff --git a/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx b/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx
index 126aaf2cb..c3f8a9f43 100644
--- a/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx
+++ b/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx
@@ -28,7 +28,7 @@ export interface TooltipDelayGroupProviderProps {
  */
 export function TooltipDelayGroupProvider(
   props: TooltipDelayGroupProviderProps,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, delay} = props
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)
diff --git a/src/core/theme/__workshop__/build/story.tsx b/src/core/theme/__workshop__/build/story.tsx
index 4e4a6911b..22db05bf2 100644
--- a/src/core/theme/__workshop__/build/story.tsx
+++ b/src/core/theme/__workshop__/build/story.tsx
@@ -13,7 +13,6 @@ import {
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
 import {buildTheme} from '@sanity/ui/theme'
-import {ReactElement} from 'react'
 import {rem} from '../../../styles'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
@@ -21,7 +20,7 @@ import {Root} from './Root'
 
 const theme = buildTheme()
 
-export default function BuildStory(): ReactElement<any> {
+export default function BuildStory(): React.JSX.Element {
   return (
     <Root>
       <div
diff --git a/src/core/theme/themeColorProvider.tsx b/src/core/theme/themeColorProvider.tsx
index f6f0c89ee..1a8df226a 100644
--- a/src/core/theme/themeColorProvider.tsx
+++ b/src/core/theme/themeColorProvider.tsx
@@ -14,7 +14,7 @@ export interface ThemeColorProviderProps {
 /**
  * @public
  */
-export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement<any> {
+export function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element {
   const {children, scheme, tone} = props
   const root = useRootTheme()
 
diff --git a/src/core/theme/themeProvider.tsx b/src/core/theme/themeProvider.tsx
index 2e353391c..1262c361e 100644
--- a/src/core/theme/themeProvider.tsx
+++ b/src/core/theme/themeProvider.tsx
@@ -23,7 +23,7 @@ export interface ThemeProviderProps {
 /**
  * @public
  */
-export function ThemeProvider(props: ThemeProviderProps): React.ReactElement<any> {
+export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element {
   const parentTheme = useContext(ThemeContext)
   const {children} = props
   const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
diff --git a/src/core/utils/arrow/arrow.tsx b/src/core/utils/arrow/arrow.tsx
index 6877a597b..d905f33cd 100644
--- a/src/core/utils/arrow/arrow.tsx
+++ b/src/core/utils/arrow/arrow.tsx
@@ -1,4 +1,4 @@
-import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
+import {ForwardedRef, HTMLProps, forwardRef} from 'react'
 import {styled, css} from 'styled-components'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
@@ -68,7 +68,7 @@ export const Arrow = forwardRef(function Arrow(
     'width' | 'height'
   >,
   ref: ForwardedRef<HTMLDivElement>,
-): ReactElement<any> {
+): React.JSX.Element {
   const {width: w, height: h, radius = 0, ...restProps} = props
   const {card} = useTheme_v2()
   const strokeWidth = card.shadow.outline
diff --git a/src/core/utils/boundaryElement/boundaryElementProvider.tsx b/src/core/utils/boundaryElement/boundaryElementProvider.tsx
index 944c4a344..18f7fecf9 100644
--- a/src/core/utils/boundaryElement/boundaryElementProvider.tsx
+++ b/src/core/utils/boundaryElement/boundaryElementProvider.tsx
@@ -13,9 +13,7 @@ export interface BoundaryElementProviderProps {
 /**
  * @public
  */
-export function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.ReactElement<any> {
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 
diff --git a/src/core/utils/layer/layerProvider.tsx b/src/core/utils/layer/layerProvider.tsx
index 60e512932..84f3cc22d 100644
--- a/src/core/utils/layer/layerProvider.tsx
+++ b/src/core/utils/layer/layerProvider.tsx
@@ -15,7 +15,7 @@ export interface LayerProviderProps {
 /**
  * @public
  */
-export function LayerProvider(props: LayerProviderProps): React.ReactElement<any> {
+export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values
diff --git a/src/core/utils/portal/portalProvider.tsx b/src/core/utils/portal/portalProvider.tsx
index 03f6a9539..9887f84b0 100644
--- a/src/core/utils/portal/portalProvider.tsx
+++ b/src/core/utils/portal/portalProvider.tsx
@@ -21,7 +21,7 @@ export interface PortalProviderProps {
 /**
  * @public
  */
-export function PortalProvider(props: PortalProviderProps): React.ReactElement<any> {
+export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
   const fallbackElement = useSyncExternalStore(
diff --git a/src/core/utils/virtualList/virtualList.tsx b/src/core/utils/virtualList/virtualList.tsx
index ac71602ac..14ebb4529 100644
--- a/src/core/utils/virtualList/virtualList.tsx
+++ b/src/core/utils/virtualList/virtualList.tsx
@@ -47,7 +47,7 @@ export const VirtualList = forwardRef(function VirtualList(
     StackProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
   const {space} = useTheme_v2()
   const ref = useRef<HTMLDivElement | null>(null)
diff --git a/test/utils.tsx b/test/utils.tsx
index 6f981332e..2c8aa7005 100644
--- a/test/utils.tsx
+++ b/test/utils.tsx
@@ -5,7 +5,7 @@ import {
   RenderOptions as _TestRenderOptions,
   RenderResult,
 } from '@testing-library/react'
-import {StrictMode, Fragment, ReactElement, ReactNode} from 'react'
+import {StrictMode, Fragment, ReactNode} from 'react'
 
 export interface TestRenderOptions extends _TestRenderOptions {
   scheme?: ThemeColorSchemeKey
@@ -19,7 +19,7 @@ function DefaultWrapper({children}: {children?: ReactNode}) {
 }
 
 export function render(
-  rootElement: ReactElement<any>,
+  rootElement: React.JSX.Element,
   options: TestRenderOptions = {},
 ): RenderResult {
   const {