diff --git a/packages/@headlessui-react/src/components/transitions/transition.test.tsx b/packages/@headlessui-react/src/components/transitions/transition.test.tsx
index 6acb8a57d6..90863b5d53 100644
--- a/packages/@headlessui-react/src/components/transitions/transition.test.tsx
+++ b/packages/@headlessui-react/src/components/transitions/transition.test.tsx
@@ -120,7 +120,9 @@ describe('Setup API', () => {
 
     it('should be possible to use a render prop', () => {
       const { container } = render(
-        <Transition show={true}>{ref => <span ref={ref}>Children</span>}</Transition>
+        <Transition show={true} as={React.Fragment}>
+          {() => <span>Children</span>}
+        </Transition>
       )
 
       expect(container.firstChild).toMatchInlineSnapshot(`
@@ -131,12 +133,20 @@ describe('Setup API', () => {
     })
 
     it(
-      'should yell at us when we forget to apply the ref when using a render prop',
+      'should yell at us when we forget to forward the ref when using a render prop',
       suppressConsoleLogs(() => {
         expect.assertions(1)
 
+        function Dummy(props: any) {
+          return <span {...props}>Children</span>
+        }
+
         expect(() => {
-          render(<Transition show={true}>{() => <span>Children</span>}</Transition>)
+          render(
+            <Transition show={true} as={React.Fragment}>
+              {() => <Dummy />}
+            </Transition>
+          )
         }).toThrowErrorMatchingInlineSnapshot(
           `"Did you forget to passthrough the \`ref\` to the actual DOM node?"`
         )
@@ -253,8 +263,10 @@ describe('Setup API', () => {
       const { container } = render(
         <div className="My Page">
           <Transition show={true}>
-            <Transition.Child>{ref => <aside ref={ref}>Sidebar</aside>}</Transition.Child>
-            <Transition.Child>{ref => <section ref={ref}>Content</section>}</Transition.Child>
+            <Transition.Child as={React.Fragment}>{() => <aside>Sidebar</aside>}</Transition.Child>
+            <Transition.Child as={React.Fragment}>
+              {() => <section>Content</section>}
+            </Transition.Child>
           </Transition>
         </div>
       )
@@ -278,11 +290,15 @@ describe('Setup API', () => {
     it('should be possible to use render props on the Transition and Transition.Child components', () => {
       const { container } = render(
         <div className="My Page">
-          <Transition show={true}>
-            {ref => (
-              <article ref={ref}>
-                <Transition.Child>{ref => <aside ref={ref}>Sidebar</aside>}</Transition.Child>
-                <Transition.Child>{ref => <section ref={ref}>Content</section>}</Transition.Child>
+          <Transition show={true} as={React.Fragment}>
+            {() => (
+              <article>
+                <Transition.Child as={React.Fragment}>
+                  {() => <aside>Sidebar</aside>}
+                </Transition.Child>
+                <Transition.Child as={React.Fragment}>
+                  {() => <section>Content</section>}
+                </Transition.Child>
               </article>
             )}
           </Transition>
@@ -306,16 +322,24 @@ describe('Setup API', () => {
     })
 
     it(
-      'should yell at us when we forgot to apply the ref on one of the Transition.Child components',
+      'should yell at us when we forgot to forward the ref on one of the Transition.Child components',
       suppressConsoleLogs(() => {
         expect.assertions(1)
 
+        function Dummy(props: any) {
+          return <div {...props} />
+        }
+
         expect(() => {
           render(
             <div className="My Page">
               <Transition show={true}>
-                <Transition.Child>{ref => <aside ref={ref}>Sidebar</aside>}</Transition.Child>
-                <Transition.Child>{() => <section>Content</section>}</Transition.Child>
+                <Transition.Child as={React.Fragment}>
+                  {() => <Dummy>Sidebar</Dummy>}
+                </Transition.Child>
+                <Transition.Child as={React.Fragment}>
+                  {() => <Dummy>Content</Dummy>}
+                </Transition.Child>
               </Transition>
             </div>
           )
@@ -326,21 +350,23 @@ describe('Setup API', () => {
     )
 
     it(
-      'should yell at us when we forgot to apply a ref on the Transition component',
+      'should yell at us when we forgot to forward a ref on the Transition component',
       suppressConsoleLogs(() => {
         expect.assertions(1)
 
+        function Dummy(props: any) {
+          return <div {...props} />
+        }
+
         expect(() => {
           render(
             <div className="My Page">
-              <Transition show={true}>
+              <Transition show={true} as={React.Fragment}>
                 {() => (
-                  <article>
-                    <Transition.Child>{ref => <aside ref={ref}>Sidebar</aside>}</Transition.Child>
-                    <Transition.Child>
-                      {ref => <section ref={ref}>Content</section>}
-                    </Transition.Child>
-                  </article>
+                  <Dummy>
+                    <Transition.Child>{() => <aside>Sidebar</aside>}</Transition.Child>
+                    <Transition.Child>{() => <section>Content</section>}</Transition.Child>
+                  </Dummy>
                 )}
               </Transition>
             </div>
diff --git a/packages/@headlessui-react/src/components/transitions/transition.tsx b/packages/@headlessui-react/src/components/transitions/transition.tsx
index 37c035c894..71fde1b8c4 100644
--- a/packages/@headlessui-react/src/components/transitions/transition.tsx
+++ b/packages/@headlessui-react/src/components/transitions/transition.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react'
+import { Props } from 'types'
 
 import { useId } from '../../hooks/use-id'
 import { useIsInitialRender } from '../../hooks/use-is-initial-render'
 import { useIsMounted } from '../../hooks/use-is-mounted'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 
-import { match } from '../../utils/match'
+import { Features, PropsForFeatures, render } from '../../utils/render'
 import { Reason, transition } from './utils/transition'
 
 type ID = ReturnType<typeof useId>
@@ -43,24 +44,9 @@ export type TransitionEvents = Partial<{
   afterLeave(): void
 }>
 
-type HTMLTags = keyof JSX.IntrinsicElements
-type HTMLTagProps<TTag extends HTMLTags> = JSX.IntrinsicElements[TTag]
-
-type AsShortcut<TTag extends HTMLTags> = {
-  children?: React.ReactNode
-  as?: TTag
-} & Omit<HTMLTagProps<TTag>, 'ref'>
-
-type AsRenderPropFunction = {
-  children: (ref: React.MutableRefObject<any>) => JSX.Element
-}
-
-type BaseConfig = Partial<{ appear: boolean }>
-
-type TransitionChildProps<TTag extends HTMLTags> = BaseConfig &
-  (AsShortcut<TTag> | AsRenderPropFunction) &
-  TransitionClasses &
-  TransitionEvents
+type TransitionChildProps<TTag> = Props<TTag, TransitionChildRenderPropArg> &
+  PropsForFeatures<typeof TransitionChildRenderFeatures> &
+  Partial<{ appear: boolean } & TransitionClasses & TransitionEvents>
 
 function useTransitionContext() {
   const context = React.useContext(TransitionContext)
@@ -156,7 +142,15 @@ function useEvents(events: TransitionEvents) {
   return eventsRef
 }
 
-function TransitionChild<TTag extends HTMLTags = 'div'>(props: TransitionChildProps<TTag>) {
+// ---
+
+const DEFAULT_TRANSITION_CHILD_TAG = 'div'
+type TransitionChildRenderPropArg = React.MutableRefObject<HTMLDivElement>
+const TransitionChildRenderFeatures = Features.RenderStrategy
+
+function TransitionChild<TTag extends React.ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
+  props: TransitionChildProps<TTag>
+) {
   const {
     // Event "handlers"
     beforeEnter,
@@ -171,9 +165,6 @@ function TransitionChild<TTag extends HTMLTags = 'div'>(props: TransitionChildPr
     leave,
     leaveFrom,
     leaveTo,
-
-    // ..
-    children,
     ...rest
   } = props
   const container = React.useRef<HTMLElement | null>(null)
@@ -266,32 +257,27 @@ function TransitionChild<TTag extends HTMLTags = 'div'>(props: TransitionChildPr
     leaveToClasses,
   ])
 
-  // Unmount the whole tree
-  if (state === TreeStates.Hidden) return null
+  const propsBag = {}
+  const propsWeControl = { ref: container }
+  const passthroughProps = rest
 
-  if (typeof children === 'function') {
-    return (
-      <NestingContext.Provider value={nesting}>
-        {(children as AsRenderPropFunction['children'])(container)}
-      </NestingContext.Provider>
-    )
-  }
-
-  const { as: Component = 'div', ...passthroughProps } = rest as AsShortcut<TTag>
   return (
     <NestingContext.Provider value={nesting}>
-      {/* @ts-expect-error Expression produces a union type that is too complex to represent. */}
-      <Component {...passthroughProps} ref={container}>
-        {children}
-      </Component>
+      {render(
+        { ...passthroughProps, ...propsWeControl },
+        propsBag,
+        DEFAULT_TRANSITION_CHILD_TAG,
+        TransitionChildRenderFeatures,
+        state === TreeStates.Visible
+      )}
     </NestingContext.Provider>
   )
 }
 
-export function Transition<TTag extends HTMLTags = 'div'>(
+export function Transition<TTag extends React.ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
   props: TransitionChildProps<TTag> & { show: boolean; appear?: boolean }
 ) {
-  const { show, appear = false, ...rest } = props
+  const { show, appear = false, unmount, ...passthroughProps } = props
 
   if (![true, false].includes(show)) {
     throw new Error('A <Transition /> is used but it is missing a `show={true | false}` prop.')
@@ -317,13 +303,22 @@ export function Transition<TTag extends HTMLTags = 'div'>(
     }
   }, [show, nestingBag])
 
+  const sharedProps = { unmount }
+
   return (
     <NestingContext.Provider value={nestingBag}>
       <TransitionContext.Provider value={transitionBag}>
-        {match(state, {
-          [TreeStates.Visible]: () => <TransitionChild {...rest} />,
-          [TreeStates.Hidden]: null,
-        })}
+        {render(
+          {
+            ...sharedProps,
+            as: React.Fragment,
+            children: <TransitionChild unmount={unmount} {...passthroughProps} />,
+          },
+          null,
+          React.Fragment,
+          TransitionChildRenderFeatures,
+          state === TreeStates.Visible
+        )}
       </TransitionContext.Provider>
     </NestingContext.Provider>
   )