diff --git a/.changeset/dark-birds-dont.md b/.changeset/dark-birds-dont.md
new file mode 100644
index 00000000000..a93b8f136d0
--- /dev/null
+++ b/.changeset/dark-birds-dont.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes `Details` flickering, prevents re-renders
diff --git a/packages/react/src/Details/Details.features.stories.tsx b/packages/react/src/Details/Details.features.stories.tsx
new file mode 100644
index 00000000000..d3cb107cddc
--- /dev/null
+++ b/packages/react/src/Details/Details.features.stories.tsx
@@ -0,0 +1,18 @@
+import type {StoryFn, Meta} from '@storybook/react-vite'
+import Details from './Details'
+import useDetails from '../hooks/useDetails'
+
+export default {
+  title: 'Components/Details/Features',
+  component: Details,
+} as Meta<typeof Details>
+
+export const WithCustomSummary: StoryFn<typeof Details> = () => {
+  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+  return (
+    <Details {...getDetailsProps()}>
+      <summary>Custom see Details</summary>
+      This is some content
+    </Details>
+  )
+}
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index 78353ae94b8..f493bf495e1 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -1,4 +1,5 @@
-import React, {useEffect, useState, type ComponentPropsWithoutRef, type ReactElement} from 'react'
+import React, {useEffect, type ComponentPropsWithoutRef, type ReactElement} from 'react'
+import {warning} from '../utils/warning'
 import {clsx} from 'clsx'
 import classes from './Details.module.css'
 import {useMergedRefs} from '../internal/hooks/useMergedRefs'
@@ -7,40 +8,25 @@ const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
   ({className, children, ...rest}, forwardRef): ReactElement => {
     const detailsRef = React.useRef<HTMLDetailsElement>(null)
     const ref = useMergedRefs(forwardRef, detailsRef)
-    const [hasSummary, setHasSummary] = useState(false)
 
     useEffect(() => {
-      const {current: details} = detailsRef
-      if (!details) {
+      if (!__DEV__) {
         return
       }
 
-      const updateSummary = () => {
-        const summary = details.querySelector('summary:not([data-default-summary])')
-        setHasSummary(!!summary)
-      }
-
-      // Update summary on mount
-      updateSummary()
-
-      const observer = new MutationObserver(() => {
-        updateSummary()
-      })
-
-      observer.observe(details, {
-        childList: true,
-        subtree: true,
-      })
-
-      return () => {
-        observer.disconnect()
+      const {current: details} = detailsRef
+      if (!details) {
+        return
       }
+      const summary = details.querySelector('summary:not([data-default-summary])')
+      warning(
+        summary === null,
+        'The <Details> component must have a <summary> child component. You can either use <Details.Summary> or a native <summary> element.',
+      )
     }, [])
 
     return (
       <details className={clsx(className, classes.Details)} {...rest} ref={ref}>
-        {/* Include default summary if summary is not provided */}
-        {!hasSummary && <Details.Summary data-default-summary>{'See Details'}</Details.Summary>}
         {children}
       </details>
     )
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index ef639556ee6..ead5d97a041 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -82,39 +82,6 @@ describe('Details', () => {
     expect(getByTestId('summary')).toHaveTextContent('Open')
   })
 
-  it('Adds default summary if no summary supplied', async () => {
-    const {getByText} = render(<Details data-testid="details">content</Details>)
-
-    expect(getByText('See Details')).toBeInTheDocument()
-    expect(getByText('See Details').tagName).toBe('SUMMARY')
-  })
-
-  it('Does not add default summary if summary supplied', async () => {
-    const {findByTestId, findByText} = render(
-      <Details data-testid="details">
-        <Details.Summary data-testid="summary">summary</Details.Summary>
-        content
-      </Details>,
-    )
-
-    await expect(findByText('See Details')).rejects.toThrow()
-    expect(await findByTestId('summary')).toBeInTheDocument()
-    expect((await findByTestId('summary')).tagName).toBe('SUMMARY')
-  })
-
-  it('Does not add default summary if supplied as different element', async () => {
-    const {findByTestId, findByText} = render(
-      <Details data-testid="details">
-        <summary data-testid="summary">custom summary</summary>
-        content
-      </Details>,
-    )
-
-    await expect(findByText('See Details')).rejects.toThrow()
-    expect(await findByTestId('summary')).toBeInTheDocument()
-    expect((await findByTestId('summary')).tagName).toBe('SUMMARY')
-  })
-
   describe('Details.Summary', () => {
     it('should support a custom `className` on the container element', () => {
       render(<Details.Summary className="custom-class">test summary</Details.Summary>)