diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
index 86ddbbff3002..3733005fb223 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
@@ -542,6 +542,7 @@ describe('ReactDOMEventListener', () => {
     const onScroll = jest.fn();
     const onCancel = jest.fn();
     const onClose = jest.fn();
+    const onToggle = jest.fn();
     document.body.appendChild(container);
     try {
       ReactDOM.render(
@@ -549,13 +550,15 @@ describe('ReactDOMEventListener', () => {
           onPlay={onPlay}
           onScroll={onScroll}
           onCancel={onCancel}
-          onClose={onClose}>
+          onClose={onClose}
+          onToggle={onToggle}>
           <div
             ref={ref}
             onPlay={onPlay}
             onScroll={onScroll}
             onCancel={onCancel}
             onClose={onClose}
+            onToggle={onToggle}
           />
         </div>,
         container,
@@ -580,12 +583,18 @@ describe('ReactDOMEventListener', () => {
           bubbles: false,
         }),
       );
+      ref.current.dispatchEvent(
+        new Event('toggle', {
+          bubbles: false,
+        }),
+      );
       // Regression test: ensure we still emulate bubbling with non-bubbling
       // media
       expect(onPlay).toHaveBeenCalledTimes(2);
       expect(onScroll).toHaveBeenCalledTimes(2);
       expect(onCancel).toHaveBeenCalledTimes(2);
       expect(onClose).toHaveBeenCalledTimes(2);
+      expect(onToggle).toHaveBeenCalledTimes(2);
     } finally {
       document.body.removeChild(container);
     }
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 8919d7f54e7c..c70a00607eeb 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -68,6 +68,7 @@ import {
   TOP_PLAYING,
   TOP_CLICK,
   TOP_SELECTION_CHANGE,
+  TOP_TOGGLE,
   getRawEventName,
 } from './DOMTopLevelEventTypes';
 import {
@@ -239,11 +240,12 @@ export const mediaEventTypes = [
 // set them on the actual target element itself. This is primarily
 // because these events do not consistently bubble in the DOM.
 export const nonDelegatedEvents: Set<DOMTopLevelEventType> = new Set([
-  TOP_SCROLL,
-  TOP_LOAD,
   TOP_CANCEL,
   TOP_CLOSE,
   TOP_INVALID,
+  TOP_LOAD,
+  TOP_SCROLL,
+  TOP_TOGGLE,
   // In order to reduce bytes, we insert the above array of media events
   // into this Set. Note: the "error" event isn't an exclusive media event,
   // and can occur on other elements too. Rather than duplicate that event,