From bdd6ae36a3ae9fe5884214c01c6c1ca11d9757f1 Mon Sep 17 00:00:00 2001
From: sebmarkbage <sebmarkbage@users.noreply.github.com>
Date: Sun, 9 Apr 2023 22:11:13 +0000
Subject: [PATCH] Refactor some controlled component stuff (#26573)

This is mainly renaming some stuff. The behavior change is
hasOwnProperty to nullish check.

I had a bigger refactor that was a dead-end but might as well land this
part and see if I can pick it up later.

DiffTrain build for [e5146cb5250be1a4e66511af91549859b36ed488](https://github.com/facebook/react/commit/e5146cb5250be1a4e66511af91549859b36ed488)
---
 compiled/facebook-www/REVISION                |   2 +-
 compiled/facebook-www/React-dev.modern.js     |   2 +-
 compiled/facebook-www/ReactART-dev.classic.js |   2 +-
 compiled/facebook-www/ReactART-prod.modern.js |   4 +-
 compiled/facebook-www/ReactDOM-dev.classic.js | 519 +++++++++---------
 compiled/facebook-www/ReactDOM-dev.modern.js  | 510 ++++++++---------
 .../facebook-www/ReactDOM-prod.classic.js     | 334 ++++++-----
 compiled/facebook-www/ReactDOM-prod.modern.js | 330 +++++------
 .../ReactDOM-profiling.classic.js             | 320 +++++------
 .../facebook-www/ReactDOM-profiling.modern.js | 316 +++++------
 .../ReactDOMTesting-dev.classic.js            | 519 +++++++++---------
 .../ReactDOMTesting-dev.modern.js             | 510 ++++++++---------
 .../ReactDOMTesting-prod.classic.js           | 334 ++++++-----
 .../ReactDOMTesting-prod.modern.js            | 330 +++++------
 .../ReactTestRenderer-dev.modern.js           |   2 +-
 15 files changed, 1944 insertions(+), 2090 deletions(-)

diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
index 6592a88a1ebd7..0e679bc9fa82b 100644
--- a/compiled/facebook-www/REVISION
+++ b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-85bb7b685b7aec50879703b94dd31523cf69b34d
+e5146cb5250be1a4e66511af91549859b36ed488
diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
index 12b8029b9c57e..2176f7003f457 100644
--- a/compiled/facebook-www/React-dev.modern.js
+++ b/compiled/facebook-www/React-dev.modern.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-modern-81d6a6e4";
+var ReactVersion = "18.3.0-www-modern-a9e6dcdb";
 
 // ATTENTION
 // When adding new symbols to this file,
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
index 333e2911fa73c..1fa2505890c52 100644
--- a/compiled/facebook-www/ReactART-dev.classic.js
+++ b/compiled/facebook-www/ReactART-dev.classic.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-classic-aefca35b";
+var ReactVersion = "18.3.0-www-classic-6b173260";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
index bc4a930385da7..cfb15ae9d3ad8 100644
--- a/compiled/facebook-www/ReactART-prod.modern.js
+++ b/compiled/facebook-www/ReactART-prod.modern.js
@@ -9737,7 +9737,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-modern-50b32236",
+    version: "18.3.0-www-modern-e257717e",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1324 = {
@@ -9768,7 +9768,7 @@ var internals$jscomp$inline_1324 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-50b32236"
+  reconcilerVersion: "18.3.0-www-modern-e257717e"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1325 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
index fec0f79713e29..d2411f0a0cdca 100644
--- a/compiled/facebook-www/ReactDOM-dev.classic.js
+++ b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -2904,6 +2904,53 @@ var canUseDOM = !!(
   typeof window.document.createElement !== "undefined"
 );
 
+var hasReadOnlyValue = {
+  button: true,
+  checkbox: true,
+  image: true,
+  hidden: true,
+  radio: true,
+  reset: true,
+  submit: true
+};
+function checkControlledValueProps(tagName, props) {
+  {
+    if (
+      !(
+        hasReadOnlyValue[props.type] ||
+        props.onChange ||
+        props.onInput ||
+        props.readOnly ||
+        props.disabled ||
+        props.value == null
+      )
+    ) {
+      error(
+        "You provided a `value` prop to a form field without an " +
+          "`onChange` handler. This will render a read-only field. If " +
+          "the field should be mutable use `defaultValue`. Otherwise, " +
+          "set either `onChange` or `readOnly`."
+      );
+    }
+
+    if (
+      !(
+        props.onChange ||
+        props.readOnly ||
+        props.disabled ||
+        props.checked == null
+      )
+    ) {
+      error(
+        "You provided a `checked` prop to a form field without an " +
+          "`onChange` handler. This will render a read-only field. If " +
+          "the field should be mutable use `defaultChecked`. Otherwise, " +
+          "set either `onChange` or `readOnly`."
+      );
+    }
+  }
+}
+
 /* eslint-disable max-len */
 
 var ATTRIBUTE_NAME_START_CHAR =
@@ -3544,53 +3591,6 @@ function getToStringValue(value) {
   }
 }
 
-var hasReadOnlyValue = {
-  button: true,
-  checkbox: true,
-  image: true,
-  hidden: true,
-  radio: true,
-  reset: true,
-  submit: true
-};
-function checkControlledValueProps(tagName, props) {
-  {
-    if (
-      !(
-        hasReadOnlyValue[props.type] ||
-        props.onChange ||
-        props.onInput ||
-        props.readOnly ||
-        props.disabled ||
-        props.value == null
-      )
-    ) {
-      error(
-        "You provided a `value` prop to a form field without an " +
-          "`onChange` handler. This will render a read-only field. If " +
-          "the field should be mutable use `defaultValue`. Otherwise, " +
-          "set either `onChange` or `readOnly`."
-      );
-    }
-
-    if (
-      !(
-        props.onChange ||
-        props.readOnly ||
-        props.disabled ||
-        props.checked == null
-      )
-    ) {
-      error(
-        "You provided a `checked` prop to a form field without an " +
-          "`onChange` handler. This will render a read-only field. If " +
-          "the field should be mutable use `defaultChecked`. Otherwise, " +
-          "set either `onChange` or `readOnly`."
-      );
-    }
-  }
-}
-
 function isCheckable(elem) {
   var type = elem.type;
   var nodeName = elem.nodeName;
@@ -3698,7 +3698,7 @@ function trackValueOnNode(node) {
 function track(node) {
   if (getTracker(node)) {
     return;
-  } // TODO: Once it's just Fiber we can move this to node._wrapperState
+  }
 
   node._valueTracker = trackValueOnNode(node);
 }
@@ -3741,13 +3741,6 @@ function getActiveElement(doc) {
 
 var didWarnValueDefaultValue$1 = false;
 var didWarnCheckedDefaultChecked = false;
-var didWarnControlledToUncontrolled = false;
-var didWarnUncontrolledToControlled = false;
-
-function isControlled(props) {
-  var usesChecked = props.type === "checkbox" || props.type === "radio";
-  return usesChecked ? props.checked != null : props.value != null;
-}
 /**
  * Implements an <input> host component that allows setting these optional
  * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
@@ -3765,10 +3758,11 @@ function isControlled(props) {
  * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
  */
 
-function initWrapperState$2(element, props) {
+function validateInputProps(element, props) {
   {
-    checkControlledValueProps("input", props);
-
+    // Normally we check for undefined and null the same, but explicitly specifying both
+    // properties, at all is probably worth warning for. We could move this either direction
+    // and just make it ok to pass null or just check hasOwnProperty.
     if (
       props.checked !== undefined &&
       props.defaultChecked !== undefined &&
@@ -3807,23 +3801,8 @@ function initWrapperState$2(element, props) {
       didWarnValueDefaultValue$1 = true;
     }
   }
-
-  var node = element;
-  var defaultValue = props.defaultValue == null ? "" : props.defaultValue;
-  var initialChecked =
-    props.checked != null ? props.checked : props.defaultChecked;
-  node._wrapperState = {
-    initialChecked:
-      typeof initialChecked !== "function" &&
-      typeof initialChecked !== "symbol" &&
-      !!initialChecked,
-    initialValue: getToStringValue(
-      props.value != null ? props.value : defaultValue
-    ),
-    controlled: isControlled(props)
-  };
 }
-function updateChecked(element, props) {
+function updateInputChecked(element, props) {
   var node = element;
   var checked = props.checked;
 
@@ -3831,75 +3810,19 @@ function updateChecked(element, props) {
     node.checked = checked;
   }
 }
-function updateWrapper$1(element, props) {
+function updateInput(element, props) {
   var node = element;
-
-  {
-    var controlled = isControlled(props);
-
-    if (
-      !node._wrapperState.controlled &&
-      controlled &&
-      !didWarnUncontrolledToControlled
-    ) {
-      error(
-        "A component is changing an uncontrolled input to be controlled. " +
-          "This is likely caused by the value changing from undefined to " +
-          "a defined value, which should not happen. " +
-          "Decide between using a controlled or uncontrolled input " +
-          "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
-      );
-
-      didWarnUncontrolledToControlled = true;
-    }
-
-    if (
-      node._wrapperState.controlled &&
-      !controlled &&
-      !didWarnControlledToUncontrolled
-    ) {
-      error(
-        "A component is changing a controlled input to be uncontrolled. " +
-          "This is likely caused by the value changing from a defined to " +
-          "undefined, which should not happen. " +
-          "Decide between using a controlled or uncontrolled input " +
-          "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
-      );
-
-      didWarnControlledToUncontrolled = true;
-    }
-  }
-
-  updateChecked(element, props);
   var value = getToStringValue(props.value);
   var type = props.type;
 
-  if (value != null) {
-    if (type === "number") {
-      if (
-        // $FlowFixMe[incompatible-type]
-        (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible.
-        // eslint-disable-next-line
-        node.value != value
-      ) {
-        node.value = toString(value);
-      }
-    } else if (node.value !== toString(value)) {
-      node.value = toString(value);
-    }
-  } else if (type === "submit" || type === "reset") {
-    // Submit/reset inputs need the attribute removed completely to avoid
-    // blank-text buttons.
-    node.removeAttribute("value");
-    return;
-  }
-
   if (disableInputAttributeSyncing) {
     // When not syncing the value attribute, React only assigns a new value
     // whenever the defaultValue React prop has changed. When not present,
     // React does nothing
-    if (props.hasOwnProperty("defaultValue")) {
+    if (props.defaultValue != null) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
+    } else {
+      node.removeAttribute("value");
     }
   } else {
     // When syncing the value attribute, the value comes from a cascade of
@@ -3907,10 +3830,12 @@ function updateWrapper$1(element, props) {
     //  1. The value React property
     //  2. The defaultValue React property
     //  3. Otherwise there should be no change
-    if (props.hasOwnProperty("value")) {
+    if (props.value != null) {
       setDefaultValue(node, props.type, value);
-    } else if (props.hasOwnProperty("defaultValue")) {
+    } else if (props.defaultValue != null) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
+    } else {
+      node.removeAttribute("value");
     }
   }
 
@@ -3930,12 +3855,33 @@ function updateWrapper$1(element, props) {
       node.defaultChecked = !!props.defaultChecked;
     }
   }
+
+  updateInputChecked(element, props);
+
+  if (value != null) {
+    if (type === "number") {
+      if (
+        // $FlowFixMe[incompatible-type]
+        (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible.
+        // eslint-disable-next-line
+        node.value != value
+      ) {
+        node.value = toString(value);
+      }
+    } else if (node.value !== toString(value)) {
+      node.value = toString(value);
+    }
+  } else if (type === "submit" || type === "reset") {
+    // Submit/reset inputs need the attribute removed completely to avoid
+    // blank-text buttons.
+    node.removeAttribute("value");
+    return;
+  }
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  var node = element; // Do not assign value if it is already set. This prevents user text input
-  // from being lost during SSR hydration.
+function initInput(element, props, isHydrating) {
+  var node = element;
 
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+  if (props.value != null || props.defaultValue != null) {
     var type = props.type;
     var isButton = type === "submit" || type === "reset"; // Avoid setting value attribute on submit/reset inputs as it overrides the
     // default value provided by the browser. See: #12872
@@ -3944,7 +3890,14 @@ function postMountWrapper$3(element, props, isHydrating) {
       return;
     }
 
-    var initialValue = toString(node._wrapperState.initialValue); // Do not assign value if it is already set. This prevents user text input
+    var defaultValue =
+      props.defaultValue != null
+        ? toString(getToStringValue(props.defaultValue))
+        : "";
+    var initialValue =
+      props.value != null
+        ? toString(getToStringValue(props.value))
+        : defaultValue; // Do not assign value if it is already set. This prevents user text input
     // from being lost during SSR hydration.
 
     if (!isHydrating) {
@@ -3981,10 +3934,8 @@ function postMountWrapper$3(element, props, isHydrating) {
     if (disableInputAttributeSyncing) {
       // When not syncing the value attribute, assign the value attribute
       // directly from the defaultValue React property (when present)
-      var defaultValue = getToStringValue(props.defaultValue);
-
-      if (defaultValue != null) {
-        node.defaultValue = toString(defaultValue);
+      if (props.defaultValue != null) {
+        node.defaultValue = defaultValue;
       }
     } else {
       // Otherwise, the value attribute is synchronized to the property,
@@ -4002,21 +3953,28 @@ function postMountWrapper$3(element, props, isHydrating) {
 
   if (name !== "") {
     node.name = "";
-  } // The checked property never gets assigned. It must be manually set.
+  }
+
+  var defaultChecked =
+    props.checked != null ? props.checked : props.defaultChecked;
+  var initialChecked =
+    typeof defaultChecked !== "function" &&
+    typeof defaultChecked !== "symbol" &&
+    !!defaultChecked; // The checked property never gets assigned. It must be manually set.
   // We don't want to do this when hydrating so that existing user input isn't
   // modified
   // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
   // correct for the hydration case then.
 
   if (!isHydrating) {
-    node.checked = !!node._wrapperState.initialChecked;
+    node.checked = !!initialChecked;
   }
 
   if (disableInputAttributeSyncing) {
     // Only assign the checked attribute if it is defined. This saves
     // a DOM write when controlling the checked attribute isn't needed
     // (text inputs, submit/reset)
-    if (props.hasOwnProperty("defaultChecked")) {
+    if (props.defaultChecked != null) {
       node.defaultChecked = !node.defaultChecked;
       node.defaultChecked = !!props.defaultChecked;
     }
@@ -4028,16 +3986,16 @@ function postMountWrapper$3(element, props, isHydrating) {
     //   2. The defaultChecked React property when present
     //   3. Otherwise, false
     node.defaultChecked = !node.defaultChecked;
-    node.defaultChecked = !!node._wrapperState.initialChecked;
+    node.defaultChecked = !!initialChecked;
   }
 
   if (name !== "") {
     node.name = name;
   }
 }
-function restoreControlledState$3(element, props) {
+function restoreControlledInputState(element, props) {
   var node = element;
-  updateWrapper$1(node, props);
+  updateInput(node, props);
   updateNamedCousins(node, props);
 }
 
@@ -4089,7 +4047,7 @@ function updateNamedCousins(rootNode, props) {
       // was previously checked to update will cause it to be come re-checked
       // as appropriate.
 
-      updateWrapper$1(otherNode, otherProps);
+      updateInput(otherNode, otherProps);
     }
   }
 } // In Chrome, assigning defaultValue to certain input types triggers input validation.
@@ -4107,9 +4065,7 @@ function setDefaultValue(node, type, value) {
     type !== "number" ||
     getActiveElement(node.ownerDocument) !== node
   ) {
-    if (value == null) {
-      node.defaultValue = toString(node._wrapperState.initialValue);
-    } else if (node.defaultValue !== toString(value)) {
+    if (node.defaultValue !== toString(value)) {
       node.defaultValue = toString(value);
     }
   }
@@ -4122,7 +4078,7 @@ var didWarnInvalidInnerHTML = false;
  * Implements an <option> host component that warns when `selected` is set.
  */
 
-function validateProps(element, props) {
+function validateOptionProps(element, props) {
   {
     // If a value is not provided, then the children must be simple.
     if (props.value == null) {
@@ -4167,7 +4123,7 @@ function validateProps(element, props) {
     }
   }
 }
-function postMountWrapper$2(element, props) {
+function initOption(element, props) {
   // value="" should make a value attribute (#6219)
   if (props.value != null) {
     element.setAttribute("value", toString(getToStringValue(props.value)));
@@ -4203,8 +4159,6 @@ var valuePropNames = ["value", "defaultValue"];
 
 function checkSelectPropTypes(props) {
   {
-    checkControlledValueProps("select", props);
-
     for (var i = 0; i < valuePropNames.length; i++) {
       var propName = valuePropNames[i];
 
@@ -4300,18 +4254,10 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
  * selected.
  */
 
-function initWrapperState$1(element, props) {
-  var node = element;
-
+function validateSelectProps(element, props) {
   {
     checkSelectPropTypes(props);
-  }
 
-  node._wrapperState = {
-    wasMultiple: !!props.multiple
-  };
-
-  {
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -4329,7 +4275,7 @@ function initWrapperState$1(element, props) {
     }
   }
 }
-function postMountWrapper$1(element, props) {
+function initSelect(element, props) {
   var node = element;
   node.multiple = !!props.multiple;
   var value = props.value;
@@ -4340,10 +4286,9 @@ function postMountWrapper$1(element, props) {
     updateOptions(node, !!props.multiple, props.defaultValue, true);
   }
 }
-function postUpdateWrapper(element, props) {
+function updateSelect(element, prevProps, props) {
   var node = element;
-  var wasMultiple = node._wrapperState.wasMultiple;
-  node._wrapperState.wasMultiple = !!props.multiple;
+  var wasMultiple = !!prevProps.multiple;
   var value = props.value;
 
   if (value != null) {
@@ -4358,7 +4303,7 @@ function postUpdateWrapper(element, props) {
     }
   }
 }
-function restoreControlledState$2(element, props) {
+function restoreControlledSelectState(element, props) {
   var node = element;
   var value = props.value;
 
@@ -4384,12 +4329,8 @@ var didWarnValDefaultVal = false;
  * `defaultValue` if specified, or the children content (deprecated).
  */
 
-function initWrapperState(element, props) {
-  var node = element;
-
+function validateTextareaProps(element, props) {
   {
-    checkControlledValueProps("textarea", props);
-
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -4407,8 +4348,42 @@ function initWrapperState(element, props) {
 
       didWarnValDefaultVal = true;
     }
+
+    if (props.children != null && props.value == null) {
+      error(
+        "Use the `defaultValue` or `value` props instead of setting " +
+          "children on <textarea>."
+      );
+    }
   }
+}
+function updateTextarea(element, props) {
+  var node = element;
+  var value = getToStringValue(props.value);
+  var defaultValue = getToStringValue(props.defaultValue);
 
+  if (defaultValue != null) {
+    node.defaultValue = toString(defaultValue);
+  } else {
+    node.defaultValue = "";
+  }
+
+  if (value != null) {
+    // Cast `value` to a string to ensure the value is set correctly. While
+    // browsers typically do this as necessary, jsdom doesn't.
+    var newValue = toString(value); // To avoid side effects (such as losing text selection), only set value if changed
+
+    if (newValue !== node.value) {
+      node.value = newValue;
+    } // TOOO: This should respect disableInputAttributeSyncing flag.
+
+    if (props.defaultValue == null && node.defaultValue !== newValue) {
+      node.defaultValue = newValue;
+    }
+  }
+}
+function initTextarea(element, props) {
+  var node = element;
   var initialValue = props.value; // Only bother fetching default value if we're going to use it
 
   if (initialValue == null) {
@@ -4416,13 +4391,6 @@ function initWrapperState(element, props) {
       defaultValue = props.defaultValue;
 
     if (children != null) {
-      {
-        error(
-          "Use the `defaultValue` or `value` props instead of setting " +
-            "children on <textarea>."
-        );
-      }
-
       {
         if (defaultValue != null) {
           throw new Error(
@@ -4451,36 +4419,7 @@ function initWrapperState(element, props) {
 
   var stringValue = getToStringValue(initialValue);
   node.defaultValue = stringValue; // This will be toString:ed.
-
-  node._wrapperState = {
-    initialValue: stringValue
-  };
-}
-function updateWrapper(element, props) {
-  var node = element;
-  var value = getToStringValue(props.value);
-  var defaultValue = getToStringValue(props.defaultValue);
-
-  if (value != null) {
-    // Cast `value` to a string to ensure the value is set correctly. While
-    // browsers typically do this as necessary, jsdom doesn't.
-    var newValue = toString(value); // To avoid side effects (such as losing text selection), only set value if changed
-
-    if (newValue !== node.value) {
-      node.value = newValue;
-    }
-
-    if (props.defaultValue == null && node.defaultValue !== newValue) {
-      node.defaultValue = newValue;
-    }
-  }
-
-  if (defaultValue != null) {
-    node.defaultValue = toString(defaultValue);
-  }
-}
-function postMountWrapper(element, props) {
-  var node = element; // This is in postMount because we need access to the DOM node, which is not
+  // This is in postMount because we need access to the DOM node, which is not
   // available until after the component has mounted.
 
   var textContent = node.textContent; // Only set node.value if textContent is equal to the expected
@@ -4488,15 +4427,15 @@ function postMountWrapper(element, props) {
   // will populate textContent as well.
   // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
 
-  if (textContent === node._wrapperState.initialValue) {
+  if (textContent === stringValue) {
     if (textContent !== "" && textContent !== null) {
       node.value = textContent;
     }
   }
 }
-function restoreControlledState$1(element, props) {
+function restoreControlledTextareaState(element, props) {
   // DOM component is still mounted; update
-  updateWrapper(element, props);
+  updateTextarea(element, props);
 }
 
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -33404,7 +33343,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-95157615";
+var ReactVersion = "18.3.0-www-classic-6714ccf8";
 
 function createPortal$1(
   children,
@@ -35605,16 +35544,18 @@ function getTargetInstForInputOrChangeEvent(domEventName, targetInst) {
   }
 }
 
-function handleControlledInputBlur(node) {
-  var state = node._wrapperState;
-
-  if (!state || !state.controlled || node.type !== "number") {
+function handleControlledInputBlur(node, props) {
+  if (node.type !== "number") {
     return;
   }
 
   if (!disableInputAttributeSyncing) {
-    // If controlled, assign the value attribute to the current value on blur
-    setDefaultValue(node, "number", node.value);
+    var isControlled = props.value != null;
+
+    if (isControlled) {
+      // If controlled, assign the value attribute to the current value on blur
+      setDefaultValue(node, "number", node.value);
+    }
   }
 }
 /**
@@ -35677,8 +35618,12 @@ function extractEvents$4(
     handleEventFunc(domEventName, targetNode, targetInst);
   } // When blurring, set the value attribute for number inputs
 
-  if (domEventName === "focusout") {
-    handleControlledInputBlur(targetNode);
+  if (domEventName === "focusout" && targetInst) {
+    // These props aren't necessarily the most current but we warn for changing
+    // between controlled and uncontrolled, so it doesn't matter and the previous
+    // code was also broken for changes.
+    var props = targetInst.memoizedProps;
+    handleControlledInputBlur(targetNode, props);
   }
 }
 
@@ -37678,6 +37623,8 @@ function getListenerSetKey(domEventName, capture) {
   return domEventName + "__" + (capture ? "capture" : "bubble");
 }
 
+var didWarnControlledToUncontrolled = false;
+var didWarnUncontrolledToControlled = false;
 var didWarnInvalidHydration = false;
 var canDiffStyleForHydrationWarning;
 
@@ -38463,7 +38410,9 @@ function setInitialProperties(domElement, tag, props) {
     }
 
     case "input": {
-      initWrapperState$2(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("input", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -38499,10 +38448,9 @@ function setInitialProperties(domElement, tag, props) {
           }
 
           case "checked": {
-            var node = domElement;
-            var checked =
-              propValue != null ? propValue : node._wrapperState.initialChecked;
-            node.checked =
+            var checked = propValue != null ? propValue : props.defaultChecked;
+            var inputElement = domElement;
+            inputElement.checked =
               !!checked &&
               typeof checked !== "function" &&
               checked !== "symbol";
@@ -38536,12 +38484,15 @@ function setInitialProperties(domElement, tag, props) {
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper$3(domElement, props, false);
+      validateInputProps(domElement, props);
+      initInput(domElement, props, false);
       return;
     }
 
     case "select": {
-      initWrapperState$1(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("select", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -38570,12 +38521,15 @@ function setInitialProperties(domElement, tag, props) {
         }
       }
 
-      postMountWrapper$1(domElement, props);
+      validateSelectProps(domElement, props);
+      initSelect(domElement, props);
       return;
     }
 
     case "textarea": {
-      initWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("textarea", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -38622,12 +38576,13 @@ function setInitialProperties(domElement, tag, props) {
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper(domElement);
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, props);
       return;
     }
 
     case "option": {
-      validateProps(domElement, props);
+      validateOptionProps(domElement, props);
 
       for (var _propKey3 in props) {
         if (!props.hasOwnProperty(_propKey3)) {
@@ -38656,7 +38611,7 @@ function setInitialProperties(domElement, tag, props) {
         }
       }
 
-      postMountWrapper$2(domElement, props);
+      initOption(domElement, props);
       return;
     }
 
@@ -38942,7 +38897,7 @@ function updateProperties(
       // In the middle of an update, it is possible to have multiple checked.
       // When a checked radio tries to change name, browser makes another radio's checked false.
       if (nextProps.type === "radio" && nextProps.name != null) {
-        updateChecked(domElement, nextProps);
+        updateInputChecked(domElement, nextProps);
       }
 
       for (var i = 0; i < updatePayload.length; i += 2) {
@@ -38951,10 +38906,10 @@ function updateProperties(
 
         switch (propKey) {
           case "checked": {
-            var node = domElement;
             var checked =
-              propValue != null ? propValue : node._wrapperState.initialChecked;
-            node.checked =
+              propValue != null ? propValue : nextProps.defaultChecked;
+            var inputElement = domElement;
+            inputElement.checked =
               !!checked &&
               typeof checked !== "function" &&
               checked !== "symbol";
@@ -38984,11 +38939,54 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
           }
         }
+      }
+
+      {
+        var wasControlled =
+          lastProps.type === "checkbox" || lastProps.type === "radio"
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        var isControlled =
+          nextProps.type === "checkbox" || nextProps.type === "radio"
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          error(
+            "A component is changing an uncontrolled input to be controlled. " +
+              "This is likely caused by the value changing from undefined to " +
+              "a defined value, which should not happen. " +
+              "Decide between using a controlled or uncontrolled input " +
+              "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
+          );
+
+          didWarnUncontrolledToControlled = true;
+        }
+
+        if (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          error(
+            "A component is changing a controlled input to be uncontrolled. " +
+              "This is likely caused by the value changing from a defined to " +
+              "undefined, which should not happen. " +
+              "Decide between using a controlled or uncontrolled input " +
+              "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
+          );
+
+          didWarnControlledToUncontrolled = true;
+        }
       } // Update the wrapper around inputs *after* updating props. This has to
       // happen after updating the rest of props. Otherwise HTML5 input validations
       // raise warnings and prevent the new value from being assigned.
 
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     }
 
@@ -39011,7 +39009,7 @@ function updateProperties(
       } // <select> value update needs to occur after <option> children
       // reconciliation
 
-      postUpdateWrapper(domElement, nextProps);
+      updateSelect(domElement, lastProps, nextProps);
       return;
     }
 
@@ -39049,7 +39047,7 @@ function updateProperties(
         }
       }
 
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     }
 
@@ -40121,41 +40119,50 @@ function diffHydratedProperties(
       break;
 
     case "input":
-      initWrapperState$2(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("input", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement); // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
 
-      track(domElement); // For input and textarea we current always set the value property at
+      track(domElement);
+      validateInputProps(domElement, props); // For input and textarea we current always set the value property at
       // post mount to force it to diverge from attributes. However, for
       // option and select we don't quite do the same thing and select
       // is not resilient to the DOM state changing so we don't do that here.
       // TODO: Consider not doing this for input and textarea.
 
-      postMountWrapper$3(domElement, props, true);
+      initInput(domElement, props, true);
       break;
 
     case "option":
-      validateProps(domElement, props);
+      validateOptionProps(domElement, props);
       break;
 
     case "select":
-      initWrapperState$1(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("select", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
+      validateSelectProps(domElement, props);
       break;
 
     case "textarea":
-      initWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("textarea", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement); // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper(domElement);
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, props);
       break;
   }
 
@@ -40322,15 +40329,15 @@ function warnForInsertedHydratedText(parentNode, text) {
 function restoreControlledState(domElement, tag, props) {
   switch (tag) {
     case "input":
-      restoreControlledState$3(domElement, props);
+      restoreControlledInputState(domElement, props);
       return;
 
     case "textarea":
-      restoreControlledState$1(domElement, props);
+      restoreControlledTextareaState(domElement, props);
       return;
 
     case "select":
-      restoreControlledState$2(domElement, props);
+      restoreControlledSelectState(domElement, props);
       return;
   }
 }
diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
index e463706613c22..c5e164c71171e 100644
--- a/compiled/facebook-www/ReactDOM-dev.modern.js
+++ b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -2468,6 +2468,53 @@ var canUseDOM = !!(
   typeof window.document.createElement !== "undefined"
 );
 
+var hasReadOnlyValue = {
+  button: true,
+  checkbox: true,
+  image: true,
+  hidden: true,
+  radio: true,
+  reset: true,
+  submit: true
+};
+function checkControlledValueProps(tagName, props) {
+  {
+    if (
+      !(
+        hasReadOnlyValue[props.type] ||
+        props.onChange ||
+        props.onInput ||
+        props.readOnly ||
+        props.disabled ||
+        props.value == null
+      )
+    ) {
+      error(
+        "You provided a `value` prop to a form field without an " +
+          "`onChange` handler. This will render a read-only field. If " +
+          "the field should be mutable use `defaultValue`. Otherwise, " +
+          "set either `onChange` or `readOnly`."
+      );
+    }
+
+    if (
+      !(
+        props.onChange ||
+        props.readOnly ||
+        props.disabled ||
+        props.checked == null
+      )
+    ) {
+      error(
+        "You provided a `checked` prop to a form field without an " +
+          "`onChange` handler. This will render a read-only field. If " +
+          "the field should be mutable use `defaultChecked`. Otherwise, " +
+          "set either `onChange` or `readOnly`."
+      );
+    }
+  }
+}
+
 /* eslint-disable max-len */
 
 var ATTRIBUTE_NAME_START_CHAR =
@@ -3378,53 +3425,6 @@ function getToStringValue(value) {
   }
 }
 
-var hasReadOnlyValue = {
-  button: true,
-  checkbox: true,
-  image: true,
-  hidden: true,
-  radio: true,
-  reset: true,
-  submit: true
-};
-function checkControlledValueProps(tagName, props) {
-  {
-    if (
-      !(
-        hasReadOnlyValue[props.type] ||
-        props.onChange ||
-        props.onInput ||
-        props.readOnly ||
-        props.disabled ||
-        props.value == null
-      )
-    ) {
-      error(
-        "You provided a `value` prop to a form field without an " +
-          "`onChange` handler. This will render a read-only field. If " +
-          "the field should be mutable use `defaultValue`. Otherwise, " +
-          "set either `onChange` or `readOnly`."
-      );
-    }
-
-    if (
-      !(
-        props.onChange ||
-        props.readOnly ||
-        props.disabled ||
-        props.checked == null
-      )
-    ) {
-      error(
-        "You provided a `checked` prop to a form field without an " +
-          "`onChange` handler. This will render a read-only field. If " +
-          "the field should be mutable use `defaultChecked`. Otherwise, " +
-          "set either `onChange` or `readOnly`."
-      );
-    }
-  }
-}
-
 function isCheckable(elem) {
   var type = elem.type;
   var nodeName = elem.nodeName;
@@ -3532,7 +3532,7 @@ function trackValueOnNode(node) {
 function track(node) {
   if (getTracker(node)) {
     return;
-  } // TODO: Once it's just Fiber we can move this to node._wrapperState
+  }
 
   node._valueTracker = trackValueOnNode(node);
 }
@@ -3575,13 +3575,6 @@ function getActiveElement(doc) {
 
 var didWarnValueDefaultValue$1 = false;
 var didWarnCheckedDefaultChecked = false;
-var didWarnControlledToUncontrolled = false;
-var didWarnUncontrolledToControlled = false;
-
-function isControlled(props) {
-  var usesChecked = props.type === "checkbox" || props.type === "radio";
-  return usesChecked ? props.checked != null : props.value != null;
-}
 /**
  * Implements an <input> host component that allows setting these optional
  * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
@@ -3599,10 +3592,11 @@ function isControlled(props) {
  * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
  */
 
-function initWrapperState$2(element, props) {
+function validateInputProps(element, props) {
   {
-    checkControlledValueProps("input", props);
-
+    // Normally we check for undefined and null the same, but explicitly specifying both
+    // properties, at all is probably worth warning for. We could move this either direction
+    // and just make it ok to pass null or just check hasOwnProperty.
     if (
       props.checked !== undefined &&
       props.defaultChecked !== undefined &&
@@ -3641,23 +3635,8 @@ function initWrapperState$2(element, props) {
       didWarnValueDefaultValue$1 = true;
     }
   }
-
-  var node = element;
-  var defaultValue = props.defaultValue == null ? "" : props.defaultValue;
-  var initialChecked =
-    props.checked != null ? props.checked : props.defaultChecked;
-  node._wrapperState = {
-    initialChecked:
-      typeof initialChecked !== "function" &&
-      typeof initialChecked !== "symbol" &&
-      !!initialChecked,
-    initialValue: getToStringValue(
-      props.value != null ? props.value : defaultValue
-    ),
-    controlled: isControlled(props)
-  };
 }
-function updateChecked(element, props) {
+function updateInputChecked(element, props) {
   var node = element;
   var checked = props.checked;
 
@@ -3665,75 +3644,19 @@ function updateChecked(element, props) {
     node.checked = checked;
   }
 }
-function updateWrapper$1(element, props) {
+function updateInput(element, props) {
   var node = element;
-
-  {
-    var controlled = isControlled(props);
-
-    if (
-      !node._wrapperState.controlled &&
-      controlled &&
-      !didWarnUncontrolledToControlled
-    ) {
-      error(
-        "A component is changing an uncontrolled input to be controlled. " +
-          "This is likely caused by the value changing from undefined to " +
-          "a defined value, which should not happen. " +
-          "Decide between using a controlled or uncontrolled input " +
-          "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
-      );
-
-      didWarnUncontrolledToControlled = true;
-    }
-
-    if (
-      node._wrapperState.controlled &&
-      !controlled &&
-      !didWarnControlledToUncontrolled
-    ) {
-      error(
-        "A component is changing a controlled input to be uncontrolled. " +
-          "This is likely caused by the value changing from a defined to " +
-          "undefined, which should not happen. " +
-          "Decide between using a controlled or uncontrolled input " +
-          "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
-      );
-
-      didWarnControlledToUncontrolled = true;
-    }
-  }
-
-  updateChecked(element, props);
   var value = getToStringValue(props.value);
   var type = props.type;
 
-  if (value != null) {
-    if (type === "number") {
-      if (
-        // $FlowFixMe[incompatible-type]
-        (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible.
-        // eslint-disable-next-line
-        node.value != value
-      ) {
-        node.value = toString(value);
-      }
-    } else if (node.value !== toString(value)) {
-      node.value = toString(value);
-    }
-  } else if (type === "submit" || type === "reset") {
-    // Submit/reset inputs need the attribute removed completely to avoid
-    // blank-text buttons.
-    node.removeAttribute("value");
-    return;
-  }
-
   if (disableInputAttributeSyncing) {
     // When not syncing the value attribute, React only assigns a new value
     // whenever the defaultValue React prop has changed. When not present,
     // React does nothing
-    if (props.hasOwnProperty("defaultValue")) {
+    if (props.defaultValue != null) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
+    } else {
+      node.removeAttribute("value");
     }
   } else {
     // When syncing the value attribute, the value comes from a cascade of
@@ -3741,10 +3664,12 @@ function updateWrapper$1(element, props) {
     //  1. The value React property
     //  2. The defaultValue React property
     //  3. Otherwise there should be no change
-    if (props.hasOwnProperty("value")) {
+    if (props.value != null) {
       setDefaultValue(node, props.type, value);
-    } else if (props.hasOwnProperty("defaultValue")) {
+    } else if (props.defaultValue != null) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
+    } else {
+      node.removeAttribute("value");
     }
   }
 
@@ -3764,12 +3689,33 @@ function updateWrapper$1(element, props) {
       node.defaultChecked = !!props.defaultChecked;
     }
   }
+
+  updateInputChecked(element, props);
+
+  if (value != null) {
+    if (type === "number") {
+      if (
+        // $FlowFixMe[incompatible-type]
+        (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible.
+        // eslint-disable-next-line
+        node.value != value
+      ) {
+        node.value = toString(value);
+      }
+    } else if (node.value !== toString(value)) {
+      node.value = toString(value);
+    }
+  } else if (type === "submit" || type === "reset") {
+    // Submit/reset inputs need the attribute removed completely to avoid
+    // blank-text buttons.
+    node.removeAttribute("value");
+    return;
+  }
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  var node = element; // Do not assign value if it is already set. This prevents user text input
-  // from being lost during SSR hydration.
+function initInput(element, props, isHydrating) {
+  var node = element;
 
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+  if (props.value != null || props.defaultValue != null) {
     var type = props.type;
     var isButton = type === "submit" || type === "reset"; // Avoid setting value attribute on submit/reset inputs as it overrides the
     // default value provided by the browser. See: #12872
@@ -3778,7 +3724,14 @@ function postMountWrapper$3(element, props, isHydrating) {
       return;
     }
 
-    var initialValue = toString(node._wrapperState.initialValue); // Do not assign value if it is already set. This prevents user text input
+    var defaultValue =
+      props.defaultValue != null
+        ? toString(getToStringValue(props.defaultValue))
+        : "";
+    var initialValue =
+      props.value != null
+        ? toString(getToStringValue(props.value))
+        : defaultValue; // Do not assign value if it is already set. This prevents user text input
     // from being lost during SSR hydration.
 
     if (!isHydrating) {
@@ -3815,10 +3768,8 @@ function postMountWrapper$3(element, props, isHydrating) {
     if (disableInputAttributeSyncing) {
       // When not syncing the value attribute, assign the value attribute
       // directly from the defaultValue React property (when present)
-      var defaultValue = getToStringValue(props.defaultValue);
-
-      if (defaultValue != null) {
-        node.defaultValue = toString(defaultValue);
+      if (props.defaultValue != null) {
+        node.defaultValue = defaultValue;
       }
     } else {
       // Otherwise, the value attribute is synchronized to the property,
@@ -3836,21 +3787,28 @@ function postMountWrapper$3(element, props, isHydrating) {
 
   if (name !== "") {
     node.name = "";
-  } // The checked property never gets assigned. It must be manually set.
+  }
+
+  var defaultChecked =
+    props.checked != null ? props.checked : props.defaultChecked;
+  var initialChecked =
+    typeof defaultChecked !== "function" &&
+    typeof defaultChecked !== "symbol" &&
+    !!defaultChecked; // The checked property never gets assigned. It must be manually set.
   // We don't want to do this when hydrating so that existing user input isn't
   // modified
   // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
   // correct for the hydration case then.
 
   if (!isHydrating) {
-    node.checked = !!node._wrapperState.initialChecked;
+    node.checked = !!initialChecked;
   }
 
   if (disableInputAttributeSyncing) {
     // Only assign the checked attribute if it is defined. This saves
     // a DOM write when controlling the checked attribute isn't needed
     // (text inputs, submit/reset)
-    if (props.hasOwnProperty("defaultChecked")) {
+    if (props.defaultChecked != null) {
       node.defaultChecked = !node.defaultChecked;
       node.defaultChecked = !!props.defaultChecked;
     }
@@ -3862,16 +3820,16 @@ function postMountWrapper$3(element, props, isHydrating) {
     //   2. The defaultChecked React property when present
     //   3. Otherwise, false
     node.defaultChecked = !node.defaultChecked;
-    node.defaultChecked = !!node._wrapperState.initialChecked;
+    node.defaultChecked = !!initialChecked;
   }
 
   if (name !== "") {
     node.name = name;
   }
 }
-function restoreControlledState$3(element, props) {
+function restoreControlledInputState(element, props) {
   var node = element;
-  updateWrapper$1(node, props);
+  updateInput(node, props);
   updateNamedCousins(node, props);
 }
 
@@ -3923,7 +3881,7 @@ function updateNamedCousins(rootNode, props) {
       // was previously checked to update will cause it to be come re-checked
       // as appropriate.
 
-      updateWrapper$1(otherNode, otherProps);
+      updateInput(otherNode, otherProps);
     }
   }
 } // In Chrome, assigning defaultValue to certain input types triggers input validation.
@@ -3941,9 +3899,7 @@ function setDefaultValue(node, type, value) {
     type !== "number" ||
     getActiveElement(node.ownerDocument) !== node
   ) {
-    if (value == null) {
-      node.defaultValue = toString(node._wrapperState.initialValue);
-    } else if (node.defaultValue !== toString(value)) {
+    if (node.defaultValue !== toString(value)) {
       node.defaultValue = toString(value);
     }
   }
@@ -3956,7 +3912,7 @@ var didWarnInvalidInnerHTML = false;
  * Implements an <option> host component that warns when `selected` is set.
  */
 
-function validateProps(element, props) {
+function validateOptionProps(element, props) {
   {
     // If a value is not provided, then the children must be simple.
     if (props.value == null) {
@@ -4001,7 +3957,7 @@ function validateProps(element, props) {
     }
   }
 }
-function postMountWrapper$2(element, props) {
+function initOption(element, props) {
   // value="" should make a value attribute (#6219)
   if (props.value != null) {
     element.setAttribute("value", toString(getToStringValue(props.value)));
@@ -4037,8 +3993,6 @@ var valuePropNames = ["value", "defaultValue"];
 
 function checkSelectPropTypes(props) {
   {
-    checkControlledValueProps("select", props);
-
     for (var i = 0; i < valuePropNames.length; i++) {
       var propName = valuePropNames[i];
 
@@ -4134,18 +4088,10 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
  * selected.
  */
 
-function initWrapperState$1(element, props) {
-  var node = element;
-
+function validateSelectProps(element, props) {
   {
     checkSelectPropTypes(props);
-  }
 
-  node._wrapperState = {
-    wasMultiple: !!props.multiple
-  };
-
-  {
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -4163,7 +4109,7 @@ function initWrapperState$1(element, props) {
     }
   }
 }
-function postMountWrapper$1(element, props) {
+function initSelect(element, props) {
   var node = element;
   node.multiple = !!props.multiple;
   var value = props.value;
@@ -4174,10 +4120,9 @@ function postMountWrapper$1(element, props) {
     updateOptions(node, !!props.multiple, props.defaultValue, true);
   }
 }
-function postUpdateWrapper(element, props) {
+function updateSelect(element, prevProps, props) {
   var node = element;
-  var wasMultiple = node._wrapperState.wasMultiple;
-  node._wrapperState.wasMultiple = !!props.multiple;
+  var wasMultiple = !!prevProps.multiple;
   var value = props.value;
 
   if (value != null) {
@@ -4192,7 +4137,7 @@ function postUpdateWrapper(element, props) {
     }
   }
 }
-function restoreControlledState$2(element, props) {
+function restoreControlledSelectState(element, props) {
   var node = element;
   var value = props.value;
 
@@ -4218,12 +4163,8 @@ var didWarnValDefaultVal = false;
  * `defaultValue` if specified, or the children content (deprecated).
  */
 
-function initWrapperState(element, props) {
-  var node = element;
-
+function validateTextareaProps(element, props) {
   {
-    checkControlledValueProps("textarea", props);
-
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -4241,42 +4182,26 @@ function initWrapperState(element, props) {
 
       didWarnValDefaultVal = true;
     }
-  }
-
-  var initialValue = props.value; // Only bother fetching default value if we're going to use it
-
-  if (initialValue == null) {
-    var children = props.children,
-      defaultValue = props.defaultValue;
 
-    if (children != null) {
-      {
-        error(
-          "Use the `defaultValue` or `value` props instead of setting " +
-            "children on <textarea>."
-        );
-      }
-    }
-
-    if (defaultValue == null) {
-      defaultValue = "";
+    if (props.children != null && props.value == null) {
+      error(
+        "Use the `defaultValue` or `value` props instead of setting " +
+          "children on <textarea>."
+      );
     }
-
-    initialValue = defaultValue;
   }
-
-  var stringValue = getToStringValue(initialValue);
-  node.defaultValue = stringValue; // This will be toString:ed.
-
-  node._wrapperState = {
-    initialValue: stringValue
-  };
 }
-function updateWrapper(element, props) {
+function updateTextarea(element, props) {
   var node = element;
   var value = getToStringValue(props.value);
   var defaultValue = getToStringValue(props.defaultValue);
 
+  if (defaultValue != null) {
+    node.defaultValue = toString(defaultValue);
+  } else {
+    node.defaultValue = "";
+  }
+
   if (value != null) {
     // Cast `value` to a string to ensure the value is set correctly. While
     // browsers typically do this as necessary, jsdom doesn't.
@@ -4284,19 +4209,30 @@ function updateWrapper(element, props) {
 
     if (newValue !== node.value) {
       node.value = newValue;
-    }
+    } // TOOO: This should respect disableInputAttributeSyncing flag.
 
     if (props.defaultValue == null && node.defaultValue !== newValue) {
       node.defaultValue = newValue;
     }
   }
+}
+function initTextarea(element, props) {
+  var node = element;
+  var initialValue = props.value; // Only bother fetching default value if we're going to use it
 
-  if (defaultValue != null) {
-    node.defaultValue = toString(defaultValue);
+  if (initialValue == null) {
+    var defaultValue = props.defaultValue;
+
+    if (defaultValue == null) {
+      defaultValue = "";
+    }
+
+    initialValue = defaultValue;
   }
-}
-function postMountWrapper(element, props) {
-  var node = element; // This is in postMount because we need access to the DOM node, which is not
+
+  var stringValue = getToStringValue(initialValue);
+  node.defaultValue = stringValue; // This will be toString:ed.
+  // This is in postMount because we need access to the DOM node, which is not
   // available until after the component has mounted.
 
   var textContent = node.textContent; // Only set node.value if textContent is equal to the expected
@@ -4304,15 +4240,15 @@ function postMountWrapper(element, props) {
   // will populate textContent as well.
   // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
 
-  if (textContent === node._wrapperState.initialValue) {
+  if (textContent === stringValue) {
     if (textContent !== "" && textContent !== null) {
       node.value = textContent;
     }
   }
 }
-function restoreControlledState$1(element, props) {
+function restoreControlledTextareaState(element, props) {
   // DOM component is still mounted; update
-  updateWrapper(element, props);
+  updateTextarea(element, props);
 }
 
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -33243,7 +33179,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-50b32236";
+var ReactVersion = "18.3.0-www-modern-e257717e";
 
 function createPortal$1(
   children,
@@ -36105,16 +36041,18 @@ function getTargetInstForInputOrChangeEvent(domEventName, targetInst) {
   }
 }
 
-function handleControlledInputBlur(node) {
-  var state = node._wrapperState;
-
-  if (!state || !state.controlled || node.type !== "number") {
+function handleControlledInputBlur(node, props) {
+  if (node.type !== "number") {
     return;
   }
 
   if (!disableInputAttributeSyncing) {
-    // If controlled, assign the value attribute to the current value on blur
-    setDefaultValue(node, "number", node.value);
+    var isControlled = props.value != null;
+
+    if (isControlled) {
+      // If controlled, assign the value attribute to the current value on blur
+      setDefaultValue(node, "number", node.value);
+    }
   }
 }
 /**
@@ -36177,8 +36115,12 @@ function extractEvents$4(
     handleEventFunc(domEventName, targetNode, targetInst);
   } // When blurring, set the value attribute for number inputs
 
-  if (domEventName === "focusout") {
-    handleControlledInputBlur(targetNode);
+  if (domEventName === "focusout" && targetInst) {
+    // These props aren't necessarily the most current but we warn for changing
+    // between controlled and uncontrolled, so it doesn't matter and the previous
+    // code was also broken for changes.
+    var props = targetInst.memoizedProps;
+    handleControlledInputBlur(targetNode, props);
   }
 }
 
@@ -38183,6 +38125,8 @@ function getListenerSetKey(domEventName, capture) {
   return domEventName + "__" + (capture ? "capture" : "bubble");
 }
 
+var didWarnControlledToUncontrolled = false;
+var didWarnUncontrolledToControlled = false;
 var didWarnInvalidHydration = false;
 var canDiffStyleForHydrationWarning;
 
@@ -38968,7 +38912,9 @@ function setInitialProperties(domElement, tag, props) {
     }
 
     case "input": {
-      initWrapperState$2(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("input", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -39004,10 +38950,9 @@ function setInitialProperties(domElement, tag, props) {
           }
 
           case "checked": {
-            var node = domElement;
-            var checked =
-              propValue != null ? propValue : node._wrapperState.initialChecked;
-            node.checked =
+            var checked = propValue != null ? propValue : props.defaultChecked;
+            var inputElement = domElement;
+            inputElement.checked =
               !!checked &&
               typeof checked !== "function" &&
               checked !== "symbol";
@@ -39041,12 +38986,15 @@ function setInitialProperties(domElement, tag, props) {
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper$3(domElement, props, false);
+      validateInputProps(domElement, props);
+      initInput(domElement, props, false);
       return;
     }
 
     case "select": {
-      initWrapperState$1(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("select", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -39075,12 +39023,15 @@ function setInitialProperties(domElement, tag, props) {
         }
       }
 
-      postMountWrapper$1(domElement, props);
+      validateSelectProps(domElement, props);
+      initSelect(domElement, props);
       return;
     }
 
     case "textarea": {
-      initWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("textarea", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -39127,12 +39078,13 @@ function setInitialProperties(domElement, tag, props) {
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper(domElement);
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, props);
       return;
     }
 
     case "option": {
-      validateProps(domElement, props);
+      validateOptionProps(domElement, props);
 
       for (var _propKey3 in props) {
         if (!props.hasOwnProperty(_propKey3)) {
@@ -39161,7 +39113,7 @@ function setInitialProperties(domElement, tag, props) {
         }
       }
 
-      postMountWrapper$2(domElement, props);
+      initOption(domElement, props);
       return;
     }
 
@@ -39447,7 +39399,7 @@ function updateProperties(
       // In the middle of an update, it is possible to have multiple checked.
       // When a checked radio tries to change name, browser makes another radio's checked false.
       if (nextProps.type === "radio" && nextProps.name != null) {
-        updateChecked(domElement, nextProps);
+        updateInputChecked(domElement, nextProps);
       }
 
       for (var i = 0; i < updatePayload.length; i += 2) {
@@ -39456,10 +39408,10 @@ function updateProperties(
 
         switch (propKey) {
           case "checked": {
-            var node = domElement;
             var checked =
-              propValue != null ? propValue : node._wrapperState.initialChecked;
-            node.checked =
+              propValue != null ? propValue : nextProps.defaultChecked;
+            var inputElement = domElement;
+            inputElement.checked =
               !!checked &&
               typeof checked !== "function" &&
               checked !== "symbol";
@@ -39489,11 +39441,54 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
           }
         }
+      }
+
+      {
+        var wasControlled =
+          lastProps.type === "checkbox" || lastProps.type === "radio"
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        var isControlled =
+          nextProps.type === "checkbox" || nextProps.type === "radio"
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          error(
+            "A component is changing an uncontrolled input to be controlled. " +
+              "This is likely caused by the value changing from undefined to " +
+              "a defined value, which should not happen. " +
+              "Decide between using a controlled or uncontrolled input " +
+              "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
+          );
+
+          didWarnUncontrolledToControlled = true;
+        }
+
+        if (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          error(
+            "A component is changing a controlled input to be uncontrolled. " +
+              "This is likely caused by the value changing from a defined to " +
+              "undefined, which should not happen. " +
+              "Decide between using a controlled or uncontrolled input " +
+              "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
+          );
+
+          didWarnControlledToUncontrolled = true;
+        }
       } // Update the wrapper around inputs *after* updating props. This has to
       // happen after updating the rest of props. Otherwise HTML5 input validations
       // raise warnings and prevent the new value from being assigned.
 
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     }
 
@@ -39516,7 +39511,7 @@ function updateProperties(
       } // <select> value update needs to occur after <option> children
       // reconciliation
 
-      postUpdateWrapper(domElement, nextProps);
+      updateSelect(domElement, lastProps, nextProps);
       return;
     }
 
@@ -39554,7 +39549,7 @@ function updateProperties(
         }
       }
 
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     }
 
@@ -40626,41 +40621,50 @@ function diffHydratedProperties(
       break;
 
     case "input":
-      initWrapperState$2(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("input", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement); // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
 
-      track(domElement); // For input and textarea we current always set the value property at
+      track(domElement);
+      validateInputProps(domElement, props); // For input and textarea we current always set the value property at
       // post mount to force it to diverge from attributes. However, for
       // option and select we don't quite do the same thing and select
       // is not resilient to the DOM state changing so we don't do that here.
       // TODO: Consider not doing this for input and textarea.
 
-      postMountWrapper$3(domElement, props, true);
+      initInput(domElement, props, true);
       break;
 
     case "option":
-      validateProps(domElement, props);
+      validateOptionProps(domElement, props);
       break;
 
     case "select":
-      initWrapperState$1(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("select", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
+      validateSelectProps(domElement, props);
       break;
 
     case "textarea":
-      initWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("textarea", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement); // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper(domElement);
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, props);
       break;
   }
 
@@ -40827,15 +40831,15 @@ function warnForInsertedHydratedText(parentNode, text) {
 function restoreControlledState(domElement, tag, props) {
   switch (tag) {
     case "input":
-      restoreControlledState$3(domElement, props);
+      restoreControlledInputState(domElement, props);
       return;
 
     case "textarea":
-      restoreControlledState$1(domElement, props);
+      restoreControlledTextareaState(domElement, props);
       return;
 
     case "select":
-      restoreControlledState$2(domElement, props);
+      restoreControlledSelectState(domElement, props);
       return;
   }
 }
diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
index de17b15bef5a0..1360d9508075a 100644
--- a/compiled/facebook-www/ReactDOM-prod.classic.js
+++ b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -973,50 +973,22 @@ function getActiveElement(doc) {
     return doc.body;
   }
 }
-function initWrapperState$2(element, props) {
-  var defaultValue = null == props.defaultValue ? "" : props.defaultValue,
-    initialChecked =
-      null != props.checked ? props.checked : props.defaultChecked;
-  defaultValue = getToStringValue(
-    null != props.value ? props.value : defaultValue
-  );
-  element._wrapperState = {
-    initialChecked:
-      "function" !== typeof initialChecked &&
-      "symbol" !== typeof initialChecked &&
-      !!initialChecked,
-    initialValue: defaultValue,
-    controlled:
-      "checkbox" === props.type || "radio" === props.type
-        ? null != props.checked
-        : null != props.value
-  };
-}
-function updateWrapper$1(element, props) {
-  var checked = props.checked;
-  null != checked && (element.checked = checked);
-  checked = getToStringValue(props.value);
-  var type = props.type;
-  if (null != checked)
-    if ("number" === type) {
-      if ((0 === checked && "" === element.value) || element.value != checked)
-        element.value = "" + checked;
-    } else element.value !== "" + checked && (element.value = "" + checked);
-  else if ("submit" === type || "reset" === type) {
-    element.removeAttribute("value");
-    return;
-  }
+function updateInput(element, props) {
+  var value = getToStringValue(props.value),
+    type = props.type;
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
-    : props.hasOwnProperty("value")
-    ? setDefaultValue(element, props.type, checked)
-    : props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(
-        element,
-        props.type,
-        getToStringValue(props.defaultValue)
-      );
+    ? null != props.defaultValue
+      ? setDefaultValue(
+          element,
+          props.type,
+          getToStringValue(props.defaultValue)
+        )
+      : element.removeAttribute("value")
+    : null != props.value
+    ? setDefaultValue(element, props.type, value)
+    : null != props.defaultValue
+    ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
+    : element.removeAttribute("value");
   disableInputAttributeSyncing
     ? null == props.defaultChecked
       ? element.removeAttribute("checked")
@@ -1024,16 +996,30 @@ function updateWrapper$1(element, props) {
     : null == props.checked &&
       null != props.defaultChecked &&
       (element.defaultChecked = !!props.defaultChecked);
+  props = props.checked;
+  null != props && (element.checked = props);
+  if (null != value)
+    if ("number" === type) {
+      if ((0 === value && "" === element.value) || element.value != value)
+        element.value = "" + value;
+    } else element.value !== "" + value && (element.value = "" + value);
+  else
+    ("submit" !== type && "reset" !== type) || element.removeAttribute("value");
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+function initInput(element, props, isHydrating) {
+  if (null != props.value || null != props.defaultValue) {
     var type = props.type;
     if (
       (type = "submit" === type || "reset" === type) &&
       (void 0 === props.value || null === props.value)
     )
       return;
-    var initialValue = "" + element._wrapperState.initialValue;
+    var defaultValue =
+        null != props.defaultValue
+          ? "" + getToStringValue(props.defaultValue)
+          : "",
+      initialValue =
+        null != props.value ? "" + getToStringValue(props.value) : defaultValue;
     if (!isHydrating)
       if (disableInputAttributeSyncing) {
         var value = getToStringValue(props.value);
@@ -1042,25 +1028,28 @@ function postMountWrapper$3(element, props, isHydrating) {
           (element.value = "" + value);
       } else initialValue !== element.value && (element.value = initialValue);
     disableInputAttributeSyncing
-      ? ((type = getToStringValue(props.defaultValue)),
-        null != type && (element.defaultValue = "" + type))
+      ? null != props.defaultValue && (element.defaultValue = defaultValue)
       : (element.defaultValue = initialValue);
   }
   type = element.name;
   "" !== type && (element.name = "");
-  isHydrating || (element.checked = !!element._wrapperState.initialChecked);
+  defaultValue = null != props.checked ? props.checked : props.defaultChecked;
+  defaultValue =
+    "function" !== typeof defaultValue &&
+    "symbol" !== typeof defaultValue &&
+    !!defaultValue;
+  isHydrating || (element.checked = !!defaultValue);
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultChecked") &&
+    ? null != props.defaultChecked &&
       ((element.defaultChecked = !element.defaultChecked),
       (element.defaultChecked = !!props.defaultChecked))
-    : (element.defaultChecked = !!element._wrapperState.initialChecked);
+    : (element.defaultChecked = !!defaultValue);
   "" !== type && (element.name = type);
 }
 function setDefaultValue(node, type, value) {
-  if ("number" !== type || getActiveElement(node.ownerDocument) !== node)
-    null == value
-      ? (node.defaultValue = "" + node._wrapperState.initialValue)
-      : node.defaultValue !== "" + value && (node.defaultValue = "" + value);
+  ("number" === type && getActiveElement(node.ownerDocument) === node) ||
+    node.defaultValue === "" + value ||
+    (node.defaultValue = "" + value);
 }
 var isArrayImpl = Array.isArray;
 function updateOptions(node, multiple, propValue, setDefaultSelected) {
@@ -1087,7 +1076,18 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
-function initWrapperState(element, props) {
+function updateTextarea(element, props) {
+  var value = getToStringValue(props.value),
+    defaultValue = getToStringValue(props.defaultValue);
+  element.defaultValue = null != defaultValue ? "" + defaultValue : "";
+  null != value &&
+    ((value = "" + value),
+    value !== element.value && (element.value = value),
+    null == props.defaultValue &&
+      element.defaultValue !== value &&
+      (element.defaultValue = value));
+}
+function initTextarea(element, props) {
   var initialValue = props.value;
   if (null == initialValue) {
     initialValue = props.children;
@@ -1105,25 +1105,11 @@ function initWrapperState(element, props) {
   }
   props = getToStringValue(initialValue);
   element.defaultValue = props;
-  element._wrapperState = { initialValue: props };
-}
-function updateWrapper(element, props) {
-  var value = getToStringValue(props.value),
-    defaultValue = getToStringValue(props.defaultValue);
-  null != value &&
-    ((value = "" + value),
-    value !== element.value && (element.value = value),
-    null == props.defaultValue &&
-      element.defaultValue !== value &&
-      (element.defaultValue = value));
-  null != defaultValue && (element.defaultValue = "" + defaultValue);
-}
-function postMountWrapper(element) {
-  var textContent = element.textContent;
-  textContent === element._wrapperState.initialValue &&
-    "" !== textContent &&
-    null !== textContent &&
-    (element.value = textContent);
+  initialValue = element.textContent;
+  initialValue === props &&
+    "" !== initialValue &&
+    null !== initialValue &&
+    (element.value = initialValue);
 }
 function getChildNamespace(parentNamespace, type) {
   if (
@@ -1331,7 +1317,7 @@ function restoreStateOfTarget(target) {
     var props = getFiberCurrentPropsFromNode(target);
     a: switch (((target = internalInstance.stateNode), internalInstance.type)) {
       case "input":
-        updateWrapper$1(target, props);
+        updateInput(target, props);
         internalInstance = props.name;
         if ("radio" === props.type && null != internalInstance) {
           for (props = target; props.parentNode; ) props = props.parentNode;
@@ -1350,13 +1336,13 @@ function restoreStateOfTarget(target) {
               var otherProps = getFiberCurrentPropsFromNode(otherNode);
               if (!otherProps) throw Error(formatProdErrorMessage(90));
               updateValueIfChanged(otherNode);
-              updateWrapper$1(otherNode, otherProps);
+              updateInput(otherNode, otherProps);
             }
           }
         }
         break a;
       case "textarea":
-        updateWrapper(target, props);
+        updateTextarea(target, props);
         break a;
       case "select":
         (internalInstance = props.value),
@@ -1664,20 +1650,17 @@ function prepareToHydrateHostInstance(fiber) {
       listenToNonDelegatedEvent("toggle", instance);
       break;
     case "input":
-      initWrapperState$2(instance, props);
       listenToNonDelegatedEvent("invalid", instance);
       track(instance);
-      postMountWrapper$3(instance, props, !0);
+      initInput(instance, props, !0);
       break;
     case "select":
-      instance._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", instance);
       break;
     case "textarea":
-      initWrapperState(instance, props),
-        listenToNonDelegatedEvent("invalid", instance),
+      listenToNonDelegatedEvent("invalid", instance),
         track(instance),
-        postMountWrapper(instance);
+        initTextarea(instance, props);
   }
   var updatePayload = null;
   type = props.children;
@@ -12575,19 +12558,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$334;
+  var JSCompiler_inline_result$jscomp$332;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1567 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1567) {
-      var element$jscomp$inline_1568 = document.createElement("div");
-      element$jscomp$inline_1568.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1567 =
-        "function" === typeof element$jscomp$inline_1568.oninput;
+    var isSupported$jscomp$inline_1562 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1562) {
+      var element$jscomp$inline_1563 = document.createElement("div");
+      element$jscomp$inline_1563.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1562 =
+        "function" === typeof element$jscomp$inline_1563.oninput;
     }
-    JSCompiler_inline_result$jscomp$334 = isSupported$jscomp$inline_1567;
-  } else JSCompiler_inline_result$jscomp$334 = !1;
+    JSCompiler_inline_result$jscomp$332 = isSupported$jscomp$inline_1562;
+  } else JSCompiler_inline_result$jscomp$332 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$334 &&
+    JSCompiler_inline_result$jscomp$332 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -12896,20 +12879,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1608 = 0;
-  i$jscomp$inline_1608 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1608++
+  var i$jscomp$inline_1603 = 0;
+  i$jscomp$inline_1603 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1603++
 ) {
-  var eventName$jscomp$inline_1609 =
-      simpleEventPluginEvents[i$jscomp$inline_1608],
-    domEventName$jscomp$inline_1610 =
-      eventName$jscomp$inline_1609.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1611 =
-      eventName$jscomp$inline_1609[0].toUpperCase() +
-      eventName$jscomp$inline_1609.slice(1);
+  var eventName$jscomp$inline_1604 =
+      simpleEventPluginEvents[i$jscomp$inline_1603],
+    domEventName$jscomp$inline_1605 =
+      eventName$jscomp$inline_1604.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1606 =
+      eventName$jscomp$inline_1604[0].toUpperCase() +
+      eventName$jscomp$inline_1604.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1610,
-    "on" + capitalizedEvent$jscomp$inline_1611
+    domEventName$jscomp$inline_1605,
+    "on" + capitalizedEvent$jscomp$inline_1606
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -13466,11 +13449,11 @@ function dispatchEventForPluginEventSystem(
         }
         handleEventFunc && handleEventFunc(domEventName, reactName, targetInst);
         "focusout" === domEventName &&
-          (handleEventFunc = reactName._wrapperState) &&
-          handleEventFunc.controlled &&
+          targetInst &&
           "number" === reactName.type &&
           (disableInputAttributeSyncing ||
-            setDefaultValue(reactName, "number", reactName.value));
+            (null != targetInst.memoizedProps.value &&
+              setDefaultValue(reactName, "number", reactName.value)));
       }
       handleEventFunc = targetInst ? getNodeFromInstance(targetInst) : window;
       switch (domEventName) {
@@ -14077,7 +14060,6 @@ function setInitialProperties(domElement, tag, props) {
     case "li":
       break;
     case "input":
-      initWrapperState$2(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey in props)
         if (props.hasOwnProperty(propKey)) {
@@ -14092,12 +14074,9 @@ function setInitialProperties(domElement, tag, props) {
                   domElement.setAttribute(propKey, propValue);
                 break;
               case "checked":
-                var node = domElement;
                 propValue =
-                  null != propValue
-                    ? propValue
-                    : node._wrapperState.initialChecked;
-                node.checked =
+                  null != propValue ? propValue : props.defaultChecked;
+                domElement.checked =
                   !!propValue &&
                   "function" !== typeof propValue &&
                   "symbol" !== propValue;
@@ -14114,21 +14093,20 @@ function setInitialProperties(domElement, tag, props) {
             }
         }
       track(domElement);
-      postMountWrapper$3(domElement, props, !1);
+      initInput(domElement, props, !1);
       return;
     case "select":
-      domElement._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", domElement);
-      for (propValue in props)
+      for (var propKey$196 in props)
         if (
-          props.hasOwnProperty(propValue) &&
-          ((propKey = props[propValue]), null != propKey)
+          props.hasOwnProperty(propKey$196) &&
+          ((propKey = props[propKey$196]), null != propKey)
         )
-          switch (propValue) {
+          switch (propKey$196) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propValue, propKey, props);
+              setProp(domElement, tag, propKey$196, propKey, props);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -14138,7 +14116,6 @@ function setInitialProperties(domElement, tag, props) {
           updateOptions(domElement, !!props.multiple, props.defaultValue, !0);
       return;
     case "textarea":
-      initWrapperState(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey$198 in props)
         if (
@@ -14157,7 +14134,7 @@ function setInitialProperties(domElement, tag, props) {
               setProp(domElement, tag, propKey$198, propKey, props);
           }
       track(domElement);
-      postMountWrapper(domElement);
+      initTextarea(domElement, props);
       return;
     case "option":
       for (var propKey$200 in props)
@@ -14244,10 +14221,10 @@ function setInitialProperties(domElement, tag, props) {
         return;
       }
   }
-  for (node in props)
-    props.hasOwnProperty(node) &&
-      ((propKey = props[node]),
-      null != propKey && setProp(domElement, tag, node, propKey, props));
+  for (propValue in props)
+    props.hasOwnProperty(propValue) &&
+      ((propKey = props[propValue]),
+      null != propKey && setProp(domElement, tag, propValue, propKey, props));
 }
 function updateProperties(
   domElement,
@@ -14276,15 +14253,11 @@ function updateProperties(
           propValue = updatePayload[lastProps + 1];
         switch (propKey) {
           case "checked":
-            propKey = domElement;
-            propValue =
-              null != propValue
-                ? propValue
-                : propKey._wrapperState.initialChecked;
-            propKey.checked =
-              !!propValue &&
-              "function" !== typeof propValue &&
-              "symbol" !== propValue;
+            propKey = null != propValue ? propValue : nextProps.defaultChecked;
+            domElement.checked =
+              !!propKey &&
+              "function" !== typeof propKey &&
+              "symbol" !== propKey;
             break;
           case "value":
             break;
@@ -14297,22 +14270,20 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
         }
       }
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     case "select":
-      for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
-        switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
-        ) {
+      for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
+        propValue = updatePayload[propKey];
+        var propValue$210 = updatePayload[propKey + 1];
+        switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propValue, propValue$210, nextProps);
         }
-      updatePayload = domElement._wrapperState.wasMultiple;
-      domElement._wrapperState.wasMultiple = !!nextProps.multiple;
+      }
+      updatePayload = !!lastProps.multiple;
       tag = nextProps.value;
       null != tag
         ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
@@ -14334,37 +14305,37 @@ function updateProperties(
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "value":
             break;
           case "children":
             break;
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(91));
+            if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     case "option":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "selected":
             domElement.selected =
-              propKey &&
-              "function" !== typeof propKey &&
-              "symbol" !== typeof propKey;
+              propValue &&
+              "function" !== typeof propValue &&
+              "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     case "img":
@@ -14384,16 +14355,17 @@ function updateProperties(
     case "menuitem":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "children":
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(137, tag));
+            if (null != propValue)
+              throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     default:
@@ -16075,17 +16047,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1826 = {
+var devToolsConfig$jscomp$inline_1822 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-5ce3ec5f",
+  version: "18.3.0-www-classic-42d0ecd9",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2195 = {
-  bundleType: devToolsConfig$jscomp$inline_1826.bundleType,
-  version: devToolsConfig$jscomp$inline_1826.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1826.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1826.rendererConfig,
+var internals$jscomp$inline_2191 = {
+  bundleType: devToolsConfig$jscomp$inline_1822.bundleType,
+  version: devToolsConfig$jscomp$inline_1822.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1822.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1822.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16101,26 +16073,26 @@ var internals$jscomp$inline_2195 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1826.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1822.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-5ce3ec5f"
+  reconcilerVersion: "18.3.0-www-classic-42d0ecd9"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2196 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2192 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2196.isDisabled &&
-    hook$jscomp$inline_2196.supportsFiber
+    !hook$jscomp$inline_2192.isDisabled &&
+    hook$jscomp$inline_2192.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2196.inject(
-        internals$jscomp$inline_2195
+      (rendererID = hook$jscomp$inline_2192.inject(
+        internals$jscomp$inline_2191
       )),
-        (injectedHook = hook$jscomp$inline_2196);
+        (injectedHook = hook$jscomp$inline_2192);
     } catch (err) {}
 }
 assign(Internals, {
@@ -16348,4 +16320,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-5ce3ec5f";
+exports.version = "18.3.0-www-classic-42d0ecd9";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
index 6c613c10740b3..109b1ffd863e8 100644
--- a/compiled/facebook-www/ReactDOM-prod.modern.js
+++ b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -822,50 +822,22 @@ function getActiveElement(doc) {
     return doc.body;
   }
 }
-function initWrapperState$2(element, props) {
-  var defaultValue = null == props.defaultValue ? "" : props.defaultValue,
-    initialChecked =
-      null != props.checked ? props.checked : props.defaultChecked;
-  defaultValue = getToStringValue(
-    null != props.value ? props.value : defaultValue
-  );
-  element._wrapperState = {
-    initialChecked:
-      "function" !== typeof initialChecked &&
-      "symbol" !== typeof initialChecked &&
-      !!initialChecked,
-    initialValue: defaultValue,
-    controlled:
-      "checkbox" === props.type || "radio" === props.type
-        ? null != props.checked
-        : null != props.value
-  };
-}
-function updateWrapper$1(element, props) {
-  var checked = props.checked;
-  null != checked && (element.checked = checked);
-  checked = getToStringValue(props.value);
-  var type = props.type;
-  if (null != checked)
-    if ("number" === type) {
-      if ((0 === checked && "" === element.value) || element.value != checked)
-        element.value = "" + checked;
-    } else element.value !== "" + checked && (element.value = "" + checked);
-  else if ("submit" === type || "reset" === type) {
-    element.removeAttribute("value");
-    return;
-  }
+function updateInput(element, props) {
+  var value = getToStringValue(props.value),
+    type = props.type;
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
-    : props.hasOwnProperty("value")
-    ? setDefaultValue(element, props.type, checked)
-    : props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(
-        element,
-        props.type,
-        getToStringValue(props.defaultValue)
-      );
+    ? null != props.defaultValue
+      ? setDefaultValue(
+          element,
+          props.type,
+          getToStringValue(props.defaultValue)
+        )
+      : element.removeAttribute("value")
+    : null != props.value
+    ? setDefaultValue(element, props.type, value)
+    : null != props.defaultValue
+    ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
+    : element.removeAttribute("value");
   disableInputAttributeSyncing
     ? null == props.defaultChecked
       ? element.removeAttribute("checked")
@@ -873,16 +845,30 @@ function updateWrapper$1(element, props) {
     : null == props.checked &&
       null != props.defaultChecked &&
       (element.defaultChecked = !!props.defaultChecked);
+  props = props.checked;
+  null != props && (element.checked = props);
+  if (null != value)
+    if ("number" === type) {
+      if ((0 === value && "" === element.value) || element.value != value)
+        element.value = "" + value;
+    } else element.value !== "" + value && (element.value = "" + value);
+  else
+    ("submit" !== type && "reset" !== type) || element.removeAttribute("value");
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+function initInput(element, props, isHydrating) {
+  if (null != props.value || null != props.defaultValue) {
     var type = props.type;
     if (
       (type = "submit" === type || "reset" === type) &&
       (void 0 === props.value || null === props.value)
     )
       return;
-    var initialValue = "" + element._wrapperState.initialValue;
+    var defaultValue =
+        null != props.defaultValue
+          ? "" + getToStringValue(props.defaultValue)
+          : "",
+      initialValue =
+        null != props.value ? "" + getToStringValue(props.value) : defaultValue;
     if (!isHydrating)
       if (disableInputAttributeSyncing) {
         var value = getToStringValue(props.value);
@@ -891,25 +877,28 @@ function postMountWrapper$3(element, props, isHydrating) {
           (element.value = "" + value);
       } else initialValue !== element.value && (element.value = initialValue);
     disableInputAttributeSyncing
-      ? ((type = getToStringValue(props.defaultValue)),
-        null != type && (element.defaultValue = "" + type))
+      ? null != props.defaultValue && (element.defaultValue = defaultValue)
       : (element.defaultValue = initialValue);
   }
   type = element.name;
   "" !== type && (element.name = "");
-  isHydrating || (element.checked = !!element._wrapperState.initialChecked);
+  defaultValue = null != props.checked ? props.checked : props.defaultChecked;
+  defaultValue =
+    "function" !== typeof defaultValue &&
+    "symbol" !== typeof defaultValue &&
+    !!defaultValue;
+  isHydrating || (element.checked = !!defaultValue);
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultChecked") &&
+    ? null != props.defaultChecked &&
       ((element.defaultChecked = !element.defaultChecked),
       (element.defaultChecked = !!props.defaultChecked))
-    : (element.defaultChecked = !!element._wrapperState.initialChecked);
+    : (element.defaultChecked = !!defaultValue);
   "" !== type && (element.name = type);
 }
 function setDefaultValue(node, type, value) {
-  if ("number" !== type || getActiveElement(node.ownerDocument) !== node)
-    null == value
-      ? (node.defaultValue = "" + node._wrapperState.initialValue)
-      : node.defaultValue !== "" + value && (node.defaultValue = "" + value);
+  ("number" === type && getActiveElement(node.ownerDocument) === node) ||
+    node.defaultValue === "" + value ||
+    (node.defaultValue = "" + value);
 }
 var isArrayImpl = Array.isArray;
 function updateOptions(node, multiple, propValue, setDefaultSelected) {
@@ -936,33 +925,30 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
-function initWrapperState(element, props) {
-  var initialValue = props.value;
-  null == initialValue &&
-    ((props = props.defaultValue),
-    null == props && (props = ""),
-    (initialValue = props));
-  props = getToStringValue(initialValue);
-  element.defaultValue = props;
-  element._wrapperState = { initialValue: props };
-}
-function updateWrapper(element, props) {
+function updateTextarea(element, props) {
   var value = getToStringValue(props.value),
     defaultValue = getToStringValue(props.defaultValue);
+  element.defaultValue = null != defaultValue ? "" + defaultValue : "";
   null != value &&
     ((value = "" + value),
     value !== element.value && (element.value = value),
     null == props.defaultValue &&
       element.defaultValue !== value &&
       (element.defaultValue = value));
-  null != defaultValue && (element.defaultValue = "" + defaultValue);
 }
-function postMountWrapper(element) {
-  var textContent = element.textContent;
-  textContent === element._wrapperState.initialValue &&
-    "" !== textContent &&
-    null !== textContent &&
-    (element.value = textContent);
+function initTextarea(element, props) {
+  var initialValue = props.value;
+  null == initialValue &&
+    ((props = props.defaultValue),
+    null == props && (props = ""),
+    (initialValue = props));
+  props = getToStringValue(initialValue);
+  element.defaultValue = props;
+  initialValue = element.textContent;
+  initialValue === props &&
+    "" !== initialValue &&
+    null !== initialValue &&
+    (element.value = initialValue);
 }
 function getChildNamespace(parentNamespace, type) {
   if (
@@ -1171,7 +1157,7 @@ function restoreStateOfTarget(target) {
     var props = getFiberCurrentPropsFromNode(target);
     a: switch (((target = internalInstance.stateNode), internalInstance.type)) {
       case "input":
-        updateWrapper$1(target, props);
+        updateInput(target, props);
         internalInstance = props.name;
         if ("radio" === props.type && null != internalInstance) {
           for (props = target; props.parentNode; ) props = props.parentNode;
@@ -1190,13 +1176,13 @@ function restoreStateOfTarget(target) {
               var otherProps = getFiberCurrentPropsFromNode(otherNode);
               if (!otherProps) throw Error(formatProdErrorMessage(90));
               updateValueIfChanged(otherNode);
-              updateWrapper$1(otherNode, otherProps);
+              updateInput(otherNode, otherProps);
             }
           }
         }
         break a;
       case "textarea":
-        updateWrapper(target, props);
+        updateTextarea(target, props);
         break a;
       case "select":
         (internalInstance = props.value),
@@ -1552,20 +1538,17 @@ function prepareToHydrateHostInstance(fiber) {
       listenToNonDelegatedEvent("toggle", instance);
       break;
     case "input":
-      initWrapperState$2(instance, props);
       listenToNonDelegatedEvent("invalid", instance);
       track(instance);
-      postMountWrapper$3(instance, props, !0);
+      initInput(instance, props, !0);
       break;
     case "select":
-      instance._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", instance);
       break;
     case "textarea":
-      initWrapperState(instance, props),
-        listenToNonDelegatedEvent("invalid", instance),
+      listenToNonDelegatedEvent("invalid", instance),
         track(instance),
-        postMountWrapper(instance);
+        initTextarea(instance, props);
   }
   var updatePayload = null;
   type = props.children;
@@ -12808,19 +12791,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$331;
+  var JSCompiler_inline_result$jscomp$329;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1559 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1559) {
-      var element$jscomp$inline_1560 = document.createElement("div");
-      element$jscomp$inline_1560.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1559 =
-        "function" === typeof element$jscomp$inline_1560.oninput;
+    var isSupported$jscomp$inline_1554 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1554) {
+      var element$jscomp$inline_1555 = document.createElement("div");
+      element$jscomp$inline_1555.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1554 =
+        "function" === typeof element$jscomp$inline_1555.oninput;
     }
-    JSCompiler_inline_result$jscomp$331 = isSupported$jscomp$inline_1559;
-  } else JSCompiler_inline_result$jscomp$331 = !1;
+    JSCompiler_inline_result$jscomp$329 = isSupported$jscomp$inline_1554;
+  } else JSCompiler_inline_result$jscomp$329 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$331 &&
+    JSCompiler_inline_result$jscomp$329 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13129,20 +13112,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1600 = 0;
-  i$jscomp$inline_1600 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1600++
+  var i$jscomp$inline_1595 = 0;
+  i$jscomp$inline_1595 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1595++
 ) {
-  var eventName$jscomp$inline_1601 =
-      simpleEventPluginEvents[i$jscomp$inline_1600],
-    domEventName$jscomp$inline_1602 =
-      eventName$jscomp$inline_1601.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1603 =
-      eventName$jscomp$inline_1601[0].toUpperCase() +
-      eventName$jscomp$inline_1601.slice(1);
+  var eventName$jscomp$inline_1596 =
+      simpleEventPluginEvents[i$jscomp$inline_1595],
+    domEventName$jscomp$inline_1597 =
+      eventName$jscomp$inline_1596.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1598 =
+      eventName$jscomp$inline_1596[0].toUpperCase() +
+      eventName$jscomp$inline_1596.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1602,
-    "on" + capitalizedEvent$jscomp$inline_1603
+    domEventName$jscomp$inline_1597,
+    "on" + capitalizedEvent$jscomp$inline_1598
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -13699,11 +13682,11 @@ function dispatchEventForPluginEventSystem(
         }
         handleEventFunc && handleEventFunc(domEventName, reactName, targetInst);
         "focusout" === domEventName &&
-          (handleEventFunc = reactName._wrapperState) &&
-          handleEventFunc.controlled &&
+          targetInst &&
           "number" === reactName.type &&
           (disableInputAttributeSyncing ||
-            setDefaultValue(reactName, "number", reactName.value));
+            (null != targetInst.memoizedProps.value &&
+              setDefaultValue(reactName, "number", reactName.value)));
       }
       handleEventFunc = targetInst ? getNodeFromInstance(targetInst) : window;
       switch (domEventName) {
@@ -14310,7 +14293,6 @@ function setInitialProperties(domElement, tag, props) {
     case "li":
       break;
     case "input":
-      initWrapperState$2(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey in props)
         if (props.hasOwnProperty(propKey)) {
@@ -14325,12 +14307,9 @@ function setInitialProperties(domElement, tag, props) {
                   domElement.setAttribute(propKey, propValue);
                 break;
               case "checked":
-                var node = domElement;
                 propValue =
-                  null != propValue
-                    ? propValue
-                    : node._wrapperState.initialChecked;
-                node.checked =
+                  null != propValue ? propValue : props.defaultChecked;
+                domElement.checked =
                   !!propValue &&
                   "function" !== typeof propValue &&
                   "symbol" !== propValue;
@@ -14347,21 +14326,20 @@ function setInitialProperties(domElement, tag, props) {
             }
         }
       track(domElement);
-      postMountWrapper$3(domElement, props, !1);
+      initInput(domElement, props, !1);
       return;
     case "select":
-      domElement._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", domElement);
-      for (propValue in props)
+      for (var propKey$200 in props)
         if (
-          props.hasOwnProperty(propValue) &&
-          ((propKey = props[propValue]), null != propKey)
+          props.hasOwnProperty(propKey$200) &&
+          ((propKey = props[propKey$200]), null != propKey)
         )
-          switch (propValue) {
+          switch (propKey$200) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propValue, propKey, props);
+              setProp(domElement, tag, propKey$200, propKey, props);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -14371,7 +14349,6 @@ function setInitialProperties(domElement, tag, props) {
           updateOptions(domElement, !!props.multiple, props.defaultValue, !0);
       return;
     case "textarea":
-      initWrapperState(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey$202 in props)
         if (
@@ -14390,7 +14367,7 @@ function setInitialProperties(domElement, tag, props) {
               setProp(domElement, tag, propKey$202, propKey, props);
           }
       track(domElement);
-      postMountWrapper(domElement);
+      initTextarea(domElement, props);
       return;
     case "option":
       for (var propKey$204 in props)
@@ -14477,10 +14454,10 @@ function setInitialProperties(domElement, tag, props) {
         return;
       }
   }
-  for (node in props)
-    props.hasOwnProperty(node) &&
-      ((propKey = props[node]),
-      null != propKey && setProp(domElement, tag, node, propKey, props));
+  for (propValue in props)
+    props.hasOwnProperty(propValue) &&
+      ((propKey = props[propValue]),
+      null != propKey && setProp(domElement, tag, propValue, propKey, props));
 }
 function updateProperties(
   domElement,
@@ -14509,15 +14486,11 @@ function updateProperties(
           propValue = updatePayload[lastProps + 1];
         switch (propKey) {
           case "checked":
-            propKey = domElement;
-            propValue =
-              null != propValue
-                ? propValue
-                : propKey._wrapperState.initialChecked;
-            propKey.checked =
-              !!propValue &&
-              "function" !== typeof propValue &&
-              "symbol" !== propValue;
+            propKey = null != propValue ? propValue : nextProps.defaultChecked;
+            domElement.checked =
+              !!propKey &&
+              "function" !== typeof propKey &&
+              "symbol" !== propKey;
             break;
           case "value":
             break;
@@ -14530,22 +14503,20 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
         }
       }
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     case "select":
-      for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
-        switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
-        ) {
+      for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
+        propValue = updatePayload[propKey];
+        var propValue$214 = updatePayload[propKey + 1];
+        switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propValue, propValue$214, nextProps);
         }
-      updatePayload = domElement._wrapperState.wasMultiple;
-      domElement._wrapperState.wasMultiple = !!nextProps.multiple;
+      }
+      updatePayload = !!lastProps.multiple;
       tag = nextProps.value;
       null != tag
         ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
@@ -14567,37 +14538,37 @@ function updateProperties(
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "value":
             break;
           case "children":
             break;
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(91));
+            if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     case "option":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "selected":
             domElement.selected =
-              propKey &&
-              "function" !== typeof propKey &&
-              "symbol" !== typeof propKey;
+              propValue &&
+              "function" !== typeof propValue &&
+              "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     case "img":
@@ -14617,16 +14588,17 @@ function updateProperties(
     case "menuitem":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "children":
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(137, tag));
+            if (null != propValue)
+              throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     default:
@@ -15602,17 +15574,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1784 = {
+var devToolsConfig$jscomp$inline_1780 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-536ea34b",
+  version: "18.3.0-www-modern-95b4ba35",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2158 = {
-  bundleType: devToolsConfig$jscomp$inline_1784.bundleType,
-  version: devToolsConfig$jscomp$inline_1784.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1784.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1784.rendererConfig,
+var internals$jscomp$inline_2154 = {
+  bundleType: devToolsConfig$jscomp$inline_1780.bundleType,
+  version: devToolsConfig$jscomp$inline_1780.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1780.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1780.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -15629,26 +15601,26 @@ var internals$jscomp$inline_2158 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1784.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1780.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-536ea34b"
+  reconcilerVersion: "18.3.0-www-modern-95b4ba35"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2159 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2159.isDisabled &&
-    hook$jscomp$inline_2159.supportsFiber
+    !hook$jscomp$inline_2155.isDisabled &&
+    hook$jscomp$inline_2155.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2159.inject(
-        internals$jscomp$inline_2158
+      (rendererID = hook$jscomp$inline_2155.inject(
+        internals$jscomp$inline_2154
       )),
-        (injectedHook = hook$jscomp$inline_2159);
+        (injectedHook = hook$jscomp$inline_2155);
     } catch (err) {}
 }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
@@ -15805,4 +15777,4 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-536ea34b";
+exports.version = "18.3.0-www-modern-95b4ba35";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
index 3465fe0a06b9c..a8e61f1852fbd 100644
--- a/compiled/facebook-www/ReactDOM-profiling.classic.js
+++ b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -1117,50 +1117,22 @@ function getActiveElement(doc) {
     return doc.body;
   }
 }
-function initWrapperState$2(element, props) {
-  var defaultValue = null == props.defaultValue ? "" : props.defaultValue,
-    initialChecked =
-      null != props.checked ? props.checked : props.defaultChecked;
-  defaultValue = getToStringValue(
-    null != props.value ? props.value : defaultValue
-  );
-  element._wrapperState = {
-    initialChecked:
-      "function" !== typeof initialChecked &&
-      "symbol" !== typeof initialChecked &&
-      !!initialChecked,
-    initialValue: defaultValue,
-    controlled:
-      "checkbox" === props.type || "radio" === props.type
-        ? null != props.checked
-        : null != props.value
-  };
-}
-function updateWrapper$1(element, props) {
-  var checked = props.checked;
-  null != checked && (element.checked = checked);
-  checked = getToStringValue(props.value);
-  var type = props.type;
-  if (null != checked)
-    if ("number" === type) {
-      if ((0 === checked && "" === element.value) || element.value != checked)
-        element.value = "" + checked;
-    } else element.value !== "" + checked && (element.value = "" + checked);
-  else if ("submit" === type || "reset" === type) {
-    element.removeAttribute("value");
-    return;
-  }
+function updateInput(element, props) {
+  var value = getToStringValue(props.value),
+    type = props.type;
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
-    : props.hasOwnProperty("value")
-    ? setDefaultValue(element, props.type, checked)
-    : props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(
-        element,
-        props.type,
-        getToStringValue(props.defaultValue)
-      );
+    ? null != props.defaultValue
+      ? setDefaultValue(
+          element,
+          props.type,
+          getToStringValue(props.defaultValue)
+        )
+      : element.removeAttribute("value")
+    : null != props.value
+    ? setDefaultValue(element, props.type, value)
+    : null != props.defaultValue
+    ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
+    : element.removeAttribute("value");
   disableInputAttributeSyncing
     ? null == props.defaultChecked
       ? element.removeAttribute("checked")
@@ -1168,16 +1140,30 @@ function updateWrapper$1(element, props) {
     : null == props.checked &&
       null != props.defaultChecked &&
       (element.defaultChecked = !!props.defaultChecked);
+  props = props.checked;
+  null != props && (element.checked = props);
+  if (null != value)
+    if ("number" === type) {
+      if ((0 === value && "" === element.value) || element.value != value)
+        element.value = "" + value;
+    } else element.value !== "" + value && (element.value = "" + value);
+  else
+    ("submit" !== type && "reset" !== type) || element.removeAttribute("value");
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+function initInput(element, props, isHydrating) {
+  if (null != props.value || null != props.defaultValue) {
     var type = props.type;
     if (
       (type = "submit" === type || "reset" === type) &&
       (void 0 === props.value || null === props.value)
     )
       return;
-    var initialValue = "" + element._wrapperState.initialValue;
+    var defaultValue =
+        null != props.defaultValue
+          ? "" + getToStringValue(props.defaultValue)
+          : "",
+      initialValue =
+        null != props.value ? "" + getToStringValue(props.value) : defaultValue;
     if (!isHydrating)
       if (disableInputAttributeSyncing) {
         var value = getToStringValue(props.value);
@@ -1186,25 +1172,28 @@ function postMountWrapper$3(element, props, isHydrating) {
           (element.value = "" + value);
       } else initialValue !== element.value && (element.value = initialValue);
     disableInputAttributeSyncing
-      ? ((type = getToStringValue(props.defaultValue)),
-        null != type && (element.defaultValue = "" + type))
+      ? null != props.defaultValue && (element.defaultValue = defaultValue)
       : (element.defaultValue = initialValue);
   }
   type = element.name;
   "" !== type && (element.name = "");
-  isHydrating || (element.checked = !!element._wrapperState.initialChecked);
+  defaultValue = null != props.checked ? props.checked : props.defaultChecked;
+  defaultValue =
+    "function" !== typeof defaultValue &&
+    "symbol" !== typeof defaultValue &&
+    !!defaultValue;
+  isHydrating || (element.checked = !!defaultValue);
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultChecked") &&
+    ? null != props.defaultChecked &&
       ((element.defaultChecked = !element.defaultChecked),
       (element.defaultChecked = !!props.defaultChecked))
-    : (element.defaultChecked = !!element._wrapperState.initialChecked);
+    : (element.defaultChecked = !!defaultValue);
   "" !== type && (element.name = type);
 }
 function setDefaultValue(node, type, value) {
-  if ("number" !== type || getActiveElement(node.ownerDocument) !== node)
-    null == value
-      ? (node.defaultValue = "" + node._wrapperState.initialValue)
-      : node.defaultValue !== "" + value && (node.defaultValue = "" + value);
+  ("number" === type && getActiveElement(node.ownerDocument) === node) ||
+    node.defaultValue === "" + value ||
+    (node.defaultValue = "" + value);
 }
 var isArrayImpl = Array.isArray;
 function updateOptions(node, multiple, propValue, setDefaultSelected) {
@@ -1231,7 +1220,18 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
-function initWrapperState(element, props) {
+function updateTextarea(element, props) {
+  var value = getToStringValue(props.value),
+    defaultValue = getToStringValue(props.defaultValue);
+  element.defaultValue = null != defaultValue ? "" + defaultValue : "";
+  null != value &&
+    ((value = "" + value),
+    value !== element.value && (element.value = value),
+    null == props.defaultValue &&
+      element.defaultValue !== value &&
+      (element.defaultValue = value));
+}
+function initTextarea(element, props) {
   var initialValue = props.value;
   if (null == initialValue) {
     initialValue = props.children;
@@ -1249,25 +1249,11 @@ function initWrapperState(element, props) {
   }
   props = getToStringValue(initialValue);
   element.defaultValue = props;
-  element._wrapperState = { initialValue: props };
-}
-function updateWrapper(element, props) {
-  var value = getToStringValue(props.value),
-    defaultValue = getToStringValue(props.defaultValue);
-  null != value &&
-    ((value = "" + value),
-    value !== element.value && (element.value = value),
-    null == props.defaultValue &&
-      element.defaultValue !== value &&
-      (element.defaultValue = value));
-  null != defaultValue && (element.defaultValue = "" + defaultValue);
-}
-function postMountWrapper(element) {
-  var textContent = element.textContent;
-  textContent === element._wrapperState.initialValue &&
-    "" !== textContent &&
-    null !== textContent &&
-    (element.value = textContent);
+  initialValue = element.textContent;
+  initialValue === props &&
+    "" !== initialValue &&
+    null !== initialValue &&
+    (element.value = initialValue);
 }
 function getChildNamespace(parentNamespace, type) {
   if (
@@ -1475,7 +1461,7 @@ function restoreStateOfTarget(target) {
     var props = getFiberCurrentPropsFromNode(target);
     a: switch (((target = internalInstance.stateNode), internalInstance.type)) {
       case "input":
-        updateWrapper$1(target, props);
+        updateInput(target, props);
         internalInstance = props.name;
         if ("radio" === props.type && null != internalInstance) {
           for (props = target; props.parentNode; ) props = props.parentNode;
@@ -1494,13 +1480,13 @@ function restoreStateOfTarget(target) {
               var otherProps = getFiberCurrentPropsFromNode(otherNode);
               if (!otherProps) throw Error(formatProdErrorMessage(90));
               updateValueIfChanged(otherNode);
-              updateWrapper$1(otherNode, otherProps);
+              updateInput(otherNode, otherProps);
             }
           }
         }
         break a;
       case "textarea":
-        updateWrapper(target, props);
+        updateTextarea(target, props);
         break a;
       case "select":
         (internalInstance = props.value),
@@ -1808,20 +1794,17 @@ function prepareToHydrateHostInstance(fiber) {
       listenToNonDelegatedEvent("toggle", instance);
       break;
     case "input":
-      initWrapperState$2(instance, props);
       listenToNonDelegatedEvent("invalid", instance);
       track(instance);
-      postMountWrapper$3(instance, props, !0);
+      initInput(instance, props, !0);
       break;
     case "select":
-      instance._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", instance);
       break;
     case "textarea":
-      initWrapperState(instance, props),
-        listenToNonDelegatedEvent("invalid", instance),
+      listenToNonDelegatedEvent("invalid", instance),
         track(instance),
-        postMountWrapper(instance);
+        initTextarea(instance, props);
   }
   var updatePayload = null;
   type = props.children;
@@ -13350,19 +13333,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$355;
+  var JSCompiler_inline_result$jscomp$353;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1646 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1646) {
-      var element$jscomp$inline_1647 = document.createElement("div");
-      element$jscomp$inline_1647.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1646 =
-        "function" === typeof element$jscomp$inline_1647.oninput;
+    var isSupported$jscomp$inline_1641 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1641) {
+      var element$jscomp$inline_1642 = document.createElement("div");
+      element$jscomp$inline_1642.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1641 =
+        "function" === typeof element$jscomp$inline_1642.oninput;
     }
-    JSCompiler_inline_result$jscomp$355 = isSupported$jscomp$inline_1646;
-  } else JSCompiler_inline_result$jscomp$355 = !1;
+    JSCompiler_inline_result$jscomp$353 = isSupported$jscomp$inline_1641;
+  } else JSCompiler_inline_result$jscomp$353 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$355 &&
+    JSCompiler_inline_result$jscomp$353 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13671,20 +13654,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1687 = 0;
-  i$jscomp$inline_1687 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1687++
+  var i$jscomp$inline_1682 = 0;
+  i$jscomp$inline_1682 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1682++
 ) {
-  var eventName$jscomp$inline_1688 =
-      simpleEventPluginEvents[i$jscomp$inline_1687],
-    domEventName$jscomp$inline_1689 =
-      eventName$jscomp$inline_1688.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1690 =
-      eventName$jscomp$inline_1688[0].toUpperCase() +
-      eventName$jscomp$inline_1688.slice(1);
+  var eventName$jscomp$inline_1683 =
+      simpleEventPluginEvents[i$jscomp$inline_1682],
+    domEventName$jscomp$inline_1684 =
+      eventName$jscomp$inline_1683.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1685 =
+      eventName$jscomp$inline_1683[0].toUpperCase() +
+      eventName$jscomp$inline_1683.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1689,
-    "on" + capitalizedEvent$jscomp$inline_1690
+    domEventName$jscomp$inline_1684,
+    "on" + capitalizedEvent$jscomp$inline_1685
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14241,11 +14224,11 @@ function dispatchEventForPluginEventSystem(
         }
         handleEventFunc && handleEventFunc(domEventName, reactName, targetInst);
         "focusout" === domEventName &&
-          (handleEventFunc = reactName._wrapperState) &&
-          handleEventFunc.controlled &&
+          targetInst &&
           "number" === reactName.type &&
           (disableInputAttributeSyncing ||
-            setDefaultValue(reactName, "number", reactName.value));
+            (null != targetInst.memoizedProps.value &&
+              setDefaultValue(reactName, "number", reactName.value)));
       }
       handleEventFunc = targetInst ? getNodeFromInstance(targetInst) : window;
       switch (domEventName) {
@@ -14852,7 +14835,6 @@ function setInitialProperties(domElement, tag, props) {
     case "li":
       break;
     case "input":
-      initWrapperState$2(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey in props)
         if (props.hasOwnProperty(propKey)) {
@@ -14867,12 +14849,9 @@ function setInitialProperties(domElement, tag, props) {
                   domElement.setAttribute(propKey, propValue);
                 break;
               case "checked":
-                var node = domElement;
                 propValue =
-                  null != propValue
-                    ? propValue
-                    : node._wrapperState.initialChecked;
-                node.checked =
+                  null != propValue ? propValue : props.defaultChecked;
+                domElement.checked =
                   !!propValue &&
                   "function" !== typeof propValue &&
                   "symbol" !== propValue;
@@ -14889,21 +14868,20 @@ function setInitialProperties(domElement, tag, props) {
             }
         }
       track(domElement);
-      postMountWrapper$3(domElement, props, !1);
+      initInput(domElement, props, !1);
       return;
     case "select":
-      domElement._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", domElement);
-      for (propValue in props)
+      for (var propKey$217 in props)
         if (
-          props.hasOwnProperty(propValue) &&
-          ((propKey = props[propValue]), null != propKey)
+          props.hasOwnProperty(propKey$217) &&
+          ((propKey = props[propKey$217]), null != propKey)
         )
-          switch (propValue) {
+          switch (propKey$217) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propValue, propKey, props);
+              setProp(domElement, tag, propKey$217, propKey, props);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -14913,7 +14891,6 @@ function setInitialProperties(domElement, tag, props) {
           updateOptions(domElement, !!props.multiple, props.defaultValue, !0);
       return;
     case "textarea":
-      initWrapperState(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey$219 in props)
         if (
@@ -14932,7 +14909,7 @@ function setInitialProperties(domElement, tag, props) {
               setProp(domElement, tag, propKey$219, propKey, props);
           }
       track(domElement);
-      postMountWrapper(domElement);
+      initTextarea(domElement, props);
       return;
     case "option":
       for (var propKey$221 in props)
@@ -15019,10 +14996,10 @@ function setInitialProperties(domElement, tag, props) {
         return;
       }
   }
-  for (node in props)
-    props.hasOwnProperty(node) &&
-      ((propKey = props[node]),
-      null != propKey && setProp(domElement, tag, node, propKey, props));
+  for (propValue in props)
+    props.hasOwnProperty(propValue) &&
+      ((propKey = props[propValue]),
+      null != propKey && setProp(domElement, tag, propValue, propKey, props));
 }
 function updateProperties(
   domElement,
@@ -15051,15 +15028,11 @@ function updateProperties(
           propValue = updatePayload[lastProps + 1];
         switch (propKey) {
           case "checked":
-            propKey = domElement;
-            propValue =
-              null != propValue
-                ? propValue
-                : propKey._wrapperState.initialChecked;
-            propKey.checked =
-              !!propValue &&
-              "function" !== typeof propValue &&
-              "symbol" !== propValue;
+            propKey = null != propValue ? propValue : nextProps.defaultChecked;
+            domElement.checked =
+              !!propKey &&
+              "function" !== typeof propKey &&
+              "symbol" !== propKey;
             break;
           case "value":
             break;
@@ -15072,22 +15045,20 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
         }
       }
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     case "select":
-      for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
-        switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
-        ) {
+      for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
+        propValue = updatePayload[propKey];
+        var propValue$231 = updatePayload[propKey + 1];
+        switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propValue, propValue$231, nextProps);
         }
-      updatePayload = domElement._wrapperState.wasMultiple;
-      domElement._wrapperState.wasMultiple = !!nextProps.multiple;
+      }
+      updatePayload = !!lastProps.multiple;
       tag = nextProps.value;
       null != tag
         ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
@@ -15109,37 +15080,37 @@ function updateProperties(
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "value":
             break;
           case "children":
             break;
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(91));
+            if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     case "option":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "selected":
             domElement.selected =
-              propKey &&
-              "function" !== typeof propKey &&
-              "symbol" !== typeof propKey;
+              propValue &&
+              "function" !== typeof propValue &&
+              "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     case "img":
@@ -15159,16 +15130,17 @@ function updateProperties(
     case "menuitem":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "children":
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(137, tag));
+            if (null != propValue)
+              throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     default:
@@ -16850,10 +16822,10 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1905 = {
+var devToolsConfig$jscomp$inline_1901 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-9291dc88",
+  version: "18.3.0-www-classic-3bbc0e4d",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16871,10 +16843,10 @@ var devToolsConfig$jscomp$inline_1905 = {
   } catch (err) {}
   return hook.checkDCE ? !0 : !1;
 })({
-  bundleType: devToolsConfig$jscomp$inline_1905.bundleType,
-  version: devToolsConfig$jscomp$inline_1905.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1905.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1905.rendererConfig,
+  bundleType: devToolsConfig$jscomp$inline_1901.bundleType,
+  version: devToolsConfig$jscomp$inline_1901.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1901.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1901.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16890,14 +16862,14 @@ var devToolsConfig$jscomp$inline_1905 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1905.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1901.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-9291dc88"
+  reconcilerVersion: "18.3.0-www-classic-3bbc0e4d"
 });
 assign(Internals, {
   ReactBrowserEventEmitter: {
@@ -17124,7 +17096,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-9291dc88";
+exports.version = "18.3.0-www-classic-3bbc0e4d";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
index 7b65a57c5361d..bd18ddb190a78 100644
--- a/compiled/facebook-www/ReactDOM-profiling.modern.js
+++ b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -966,50 +966,22 @@ function getActiveElement(doc) {
     return doc.body;
   }
 }
-function initWrapperState$2(element, props) {
-  var defaultValue = null == props.defaultValue ? "" : props.defaultValue,
-    initialChecked =
-      null != props.checked ? props.checked : props.defaultChecked;
-  defaultValue = getToStringValue(
-    null != props.value ? props.value : defaultValue
-  );
-  element._wrapperState = {
-    initialChecked:
-      "function" !== typeof initialChecked &&
-      "symbol" !== typeof initialChecked &&
-      !!initialChecked,
-    initialValue: defaultValue,
-    controlled:
-      "checkbox" === props.type || "radio" === props.type
-        ? null != props.checked
-        : null != props.value
-  };
-}
-function updateWrapper$1(element, props) {
-  var checked = props.checked;
-  null != checked && (element.checked = checked);
-  checked = getToStringValue(props.value);
-  var type = props.type;
-  if (null != checked)
-    if ("number" === type) {
-      if ((0 === checked && "" === element.value) || element.value != checked)
-        element.value = "" + checked;
-    } else element.value !== "" + checked && (element.value = "" + checked);
-  else if ("submit" === type || "reset" === type) {
-    element.removeAttribute("value");
-    return;
-  }
+function updateInput(element, props) {
+  var value = getToStringValue(props.value),
+    type = props.type;
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
-    : props.hasOwnProperty("value")
-    ? setDefaultValue(element, props.type, checked)
-    : props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(
-        element,
-        props.type,
-        getToStringValue(props.defaultValue)
-      );
+    ? null != props.defaultValue
+      ? setDefaultValue(
+          element,
+          props.type,
+          getToStringValue(props.defaultValue)
+        )
+      : element.removeAttribute("value")
+    : null != props.value
+    ? setDefaultValue(element, props.type, value)
+    : null != props.defaultValue
+    ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
+    : element.removeAttribute("value");
   disableInputAttributeSyncing
     ? null == props.defaultChecked
       ? element.removeAttribute("checked")
@@ -1017,16 +989,30 @@ function updateWrapper$1(element, props) {
     : null == props.checked &&
       null != props.defaultChecked &&
       (element.defaultChecked = !!props.defaultChecked);
+  props = props.checked;
+  null != props && (element.checked = props);
+  if (null != value)
+    if ("number" === type) {
+      if ((0 === value && "" === element.value) || element.value != value)
+        element.value = "" + value;
+    } else element.value !== "" + value && (element.value = "" + value);
+  else
+    ("submit" !== type && "reset" !== type) || element.removeAttribute("value");
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+function initInput(element, props, isHydrating) {
+  if (null != props.value || null != props.defaultValue) {
     var type = props.type;
     if (
       (type = "submit" === type || "reset" === type) &&
       (void 0 === props.value || null === props.value)
     )
       return;
-    var initialValue = "" + element._wrapperState.initialValue;
+    var defaultValue =
+        null != props.defaultValue
+          ? "" + getToStringValue(props.defaultValue)
+          : "",
+      initialValue =
+        null != props.value ? "" + getToStringValue(props.value) : defaultValue;
     if (!isHydrating)
       if (disableInputAttributeSyncing) {
         var value = getToStringValue(props.value);
@@ -1035,25 +1021,28 @@ function postMountWrapper$3(element, props, isHydrating) {
           (element.value = "" + value);
       } else initialValue !== element.value && (element.value = initialValue);
     disableInputAttributeSyncing
-      ? ((type = getToStringValue(props.defaultValue)),
-        null != type && (element.defaultValue = "" + type))
+      ? null != props.defaultValue && (element.defaultValue = defaultValue)
       : (element.defaultValue = initialValue);
   }
   type = element.name;
   "" !== type && (element.name = "");
-  isHydrating || (element.checked = !!element._wrapperState.initialChecked);
+  defaultValue = null != props.checked ? props.checked : props.defaultChecked;
+  defaultValue =
+    "function" !== typeof defaultValue &&
+    "symbol" !== typeof defaultValue &&
+    !!defaultValue;
+  isHydrating || (element.checked = !!defaultValue);
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultChecked") &&
+    ? null != props.defaultChecked &&
       ((element.defaultChecked = !element.defaultChecked),
       (element.defaultChecked = !!props.defaultChecked))
-    : (element.defaultChecked = !!element._wrapperState.initialChecked);
+    : (element.defaultChecked = !!defaultValue);
   "" !== type && (element.name = type);
 }
 function setDefaultValue(node, type, value) {
-  if ("number" !== type || getActiveElement(node.ownerDocument) !== node)
-    null == value
-      ? (node.defaultValue = "" + node._wrapperState.initialValue)
-      : node.defaultValue !== "" + value && (node.defaultValue = "" + value);
+  ("number" === type && getActiveElement(node.ownerDocument) === node) ||
+    node.defaultValue === "" + value ||
+    (node.defaultValue = "" + value);
 }
 var isArrayImpl = Array.isArray;
 function updateOptions(node, multiple, propValue, setDefaultSelected) {
@@ -1080,33 +1069,30 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
-function initWrapperState(element, props) {
-  var initialValue = props.value;
-  null == initialValue &&
-    ((props = props.defaultValue),
-    null == props && (props = ""),
-    (initialValue = props));
-  props = getToStringValue(initialValue);
-  element.defaultValue = props;
-  element._wrapperState = { initialValue: props };
-}
-function updateWrapper(element, props) {
+function updateTextarea(element, props) {
   var value = getToStringValue(props.value),
     defaultValue = getToStringValue(props.defaultValue);
+  element.defaultValue = null != defaultValue ? "" + defaultValue : "";
   null != value &&
     ((value = "" + value),
     value !== element.value && (element.value = value),
     null == props.defaultValue &&
       element.defaultValue !== value &&
       (element.defaultValue = value));
-  null != defaultValue && (element.defaultValue = "" + defaultValue);
 }
-function postMountWrapper(element) {
-  var textContent = element.textContent;
-  textContent === element._wrapperState.initialValue &&
-    "" !== textContent &&
-    null !== textContent &&
-    (element.value = textContent);
+function initTextarea(element, props) {
+  var initialValue = props.value;
+  null == initialValue &&
+    ((props = props.defaultValue),
+    null == props && (props = ""),
+    (initialValue = props));
+  props = getToStringValue(initialValue);
+  element.defaultValue = props;
+  initialValue = element.textContent;
+  initialValue === props &&
+    "" !== initialValue &&
+    null !== initialValue &&
+    (element.value = initialValue);
 }
 function getChildNamespace(parentNamespace, type) {
   if (
@@ -1315,7 +1301,7 @@ function restoreStateOfTarget(target) {
     var props = getFiberCurrentPropsFromNode(target);
     a: switch (((target = internalInstance.stateNode), internalInstance.type)) {
       case "input":
-        updateWrapper$1(target, props);
+        updateInput(target, props);
         internalInstance = props.name;
         if ("radio" === props.type && null != internalInstance) {
           for (props = target; props.parentNode; ) props = props.parentNode;
@@ -1334,13 +1320,13 @@ function restoreStateOfTarget(target) {
               var otherProps = getFiberCurrentPropsFromNode(otherNode);
               if (!otherProps) throw Error(formatProdErrorMessage(90));
               updateValueIfChanged(otherNode);
-              updateWrapper$1(otherNode, otherProps);
+              updateInput(otherNode, otherProps);
             }
           }
         }
         break a;
       case "textarea":
-        updateWrapper(target, props);
+        updateTextarea(target, props);
         break a;
       case "select":
         (internalInstance = props.value),
@@ -1696,20 +1682,17 @@ function prepareToHydrateHostInstance(fiber) {
       listenToNonDelegatedEvent("toggle", instance);
       break;
     case "input":
-      initWrapperState$2(instance, props);
       listenToNonDelegatedEvent("invalid", instance);
       track(instance);
-      postMountWrapper$3(instance, props, !0);
+      initInput(instance, props, !0);
       break;
     case "select":
-      instance._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", instance);
       break;
     case "textarea":
-      initWrapperState(instance, props),
-        listenToNonDelegatedEvent("invalid", instance),
+      listenToNonDelegatedEvent("invalid", instance),
         track(instance),
-        postMountWrapper(instance);
+        initTextarea(instance, props);
   }
   var updatePayload = null;
   type = props.children;
@@ -13577,19 +13560,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$352;
+  var JSCompiler_inline_result$jscomp$350;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1638 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1638) {
-      var element$jscomp$inline_1639 = document.createElement("div");
-      element$jscomp$inline_1639.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1638 =
-        "function" === typeof element$jscomp$inline_1639.oninput;
+    var isSupported$jscomp$inline_1633 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1633) {
+      var element$jscomp$inline_1634 = document.createElement("div");
+      element$jscomp$inline_1634.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1633 =
+        "function" === typeof element$jscomp$inline_1634.oninput;
     }
-    JSCompiler_inline_result$jscomp$352 = isSupported$jscomp$inline_1638;
-  } else JSCompiler_inline_result$jscomp$352 = !1;
+    JSCompiler_inline_result$jscomp$350 = isSupported$jscomp$inline_1633;
+  } else JSCompiler_inline_result$jscomp$350 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$352 &&
+    JSCompiler_inline_result$jscomp$350 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13898,20 +13881,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1679 = 0;
-  i$jscomp$inline_1679 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1679++
+  var i$jscomp$inline_1674 = 0;
+  i$jscomp$inline_1674 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1674++
 ) {
-  var eventName$jscomp$inline_1680 =
-      simpleEventPluginEvents[i$jscomp$inline_1679],
-    domEventName$jscomp$inline_1681 =
-      eventName$jscomp$inline_1680.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1682 =
-      eventName$jscomp$inline_1680[0].toUpperCase() +
-      eventName$jscomp$inline_1680.slice(1);
+  var eventName$jscomp$inline_1675 =
+      simpleEventPluginEvents[i$jscomp$inline_1674],
+    domEventName$jscomp$inline_1676 =
+      eventName$jscomp$inline_1675.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1677 =
+      eventName$jscomp$inline_1675[0].toUpperCase() +
+      eventName$jscomp$inline_1675.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1681,
-    "on" + capitalizedEvent$jscomp$inline_1682
+    domEventName$jscomp$inline_1676,
+    "on" + capitalizedEvent$jscomp$inline_1677
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14468,11 +14451,11 @@ function dispatchEventForPluginEventSystem(
         }
         handleEventFunc && handleEventFunc(domEventName, reactName, targetInst);
         "focusout" === domEventName &&
-          (handleEventFunc = reactName._wrapperState) &&
-          handleEventFunc.controlled &&
+          targetInst &&
           "number" === reactName.type &&
           (disableInputAttributeSyncing ||
-            setDefaultValue(reactName, "number", reactName.value));
+            (null != targetInst.memoizedProps.value &&
+              setDefaultValue(reactName, "number", reactName.value)));
       }
       handleEventFunc = targetInst ? getNodeFromInstance(targetInst) : window;
       switch (domEventName) {
@@ -15079,7 +15062,6 @@ function setInitialProperties(domElement, tag, props) {
     case "li":
       break;
     case "input":
-      initWrapperState$2(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey in props)
         if (props.hasOwnProperty(propKey)) {
@@ -15094,12 +15076,9 @@ function setInitialProperties(domElement, tag, props) {
                   domElement.setAttribute(propKey, propValue);
                 break;
               case "checked":
-                var node = domElement;
                 propValue =
-                  null != propValue
-                    ? propValue
-                    : node._wrapperState.initialChecked;
-                node.checked =
+                  null != propValue ? propValue : props.defaultChecked;
+                domElement.checked =
                   !!propValue &&
                   "function" !== typeof propValue &&
                   "symbol" !== propValue;
@@ -15116,21 +15095,20 @@ function setInitialProperties(domElement, tag, props) {
             }
         }
       track(domElement);
-      postMountWrapper$3(domElement, props, !1);
+      initInput(domElement, props, !1);
       return;
     case "select":
-      domElement._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", domElement);
-      for (propValue in props)
+      for (var propKey$221 in props)
         if (
-          props.hasOwnProperty(propValue) &&
-          ((propKey = props[propValue]), null != propKey)
+          props.hasOwnProperty(propKey$221) &&
+          ((propKey = props[propKey$221]), null != propKey)
         )
-          switch (propValue) {
+          switch (propKey$221) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propValue, propKey, props);
+              setProp(domElement, tag, propKey$221, propKey, props);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -15140,7 +15118,6 @@ function setInitialProperties(domElement, tag, props) {
           updateOptions(domElement, !!props.multiple, props.defaultValue, !0);
       return;
     case "textarea":
-      initWrapperState(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey$223 in props)
         if (
@@ -15159,7 +15136,7 @@ function setInitialProperties(domElement, tag, props) {
               setProp(domElement, tag, propKey$223, propKey, props);
           }
       track(domElement);
-      postMountWrapper(domElement);
+      initTextarea(domElement, props);
       return;
     case "option":
       for (var propKey$225 in props)
@@ -15246,10 +15223,10 @@ function setInitialProperties(domElement, tag, props) {
         return;
       }
   }
-  for (node in props)
-    props.hasOwnProperty(node) &&
-      ((propKey = props[node]),
-      null != propKey && setProp(domElement, tag, node, propKey, props));
+  for (propValue in props)
+    props.hasOwnProperty(propValue) &&
+      ((propKey = props[propValue]),
+      null != propKey && setProp(domElement, tag, propValue, propKey, props));
 }
 function updateProperties(
   domElement,
@@ -15278,15 +15255,11 @@ function updateProperties(
           propValue = updatePayload[lastProps + 1];
         switch (propKey) {
           case "checked":
-            propKey = domElement;
-            propValue =
-              null != propValue
-                ? propValue
-                : propKey._wrapperState.initialChecked;
-            propKey.checked =
-              !!propValue &&
-              "function" !== typeof propValue &&
-              "symbol" !== propValue;
+            propKey = null != propValue ? propValue : nextProps.defaultChecked;
+            domElement.checked =
+              !!propKey &&
+              "function" !== typeof propKey &&
+              "symbol" !== propKey;
             break;
           case "value":
             break;
@@ -15299,22 +15272,20 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
         }
       }
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     case "select":
-      for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
-        switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
-        ) {
+      for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
+        propValue = updatePayload[propKey];
+        var propValue$235 = updatePayload[propKey + 1];
+        switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propValue, propValue$235, nextProps);
         }
-      updatePayload = domElement._wrapperState.wasMultiple;
-      domElement._wrapperState.wasMultiple = !!nextProps.multiple;
+      }
+      updatePayload = !!lastProps.multiple;
       tag = nextProps.value;
       null != tag
         ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
@@ -15336,37 +15307,37 @@ function updateProperties(
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "value":
             break;
           case "children":
             break;
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(91));
+            if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     case "option":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "selected":
             domElement.selected =
-              propKey &&
-              "function" !== typeof propKey &&
-              "symbol" !== typeof propKey;
+              propValue &&
+              "function" !== typeof propValue &&
+              "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     case "img":
@@ -15386,16 +15357,17 @@ function updateProperties(
     case "menuitem":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "children":
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(137, tag));
+            if (null != propValue)
+              throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     default:
@@ -16371,10 +16343,10 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1863 = {
+var devToolsConfig$jscomp$inline_1859 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-774d8b2c",
+  version: "18.3.0-www-modern-d3a94823",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16392,10 +16364,10 @@ var devToolsConfig$jscomp$inline_1863 = {
   } catch (err) {}
   return hook.checkDCE ? !0 : !1;
 })({
-  bundleType: devToolsConfig$jscomp$inline_1863.bundleType,
-  version: devToolsConfig$jscomp$inline_1863.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1863.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1863.rendererConfig,
+  bundleType: devToolsConfig$jscomp$inline_1859.bundleType,
+  version: devToolsConfig$jscomp$inline_1859.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1859.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1859.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16412,14 +16384,14 @@ var devToolsConfig$jscomp$inline_1863 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1863.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1859.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-774d8b2c"
+  reconcilerVersion: "18.3.0-www-modern-d3a94823"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -16575,7 +16547,7 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-774d8b2c";
+exports.version = "18.3.0-www-modern-d3a94823";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
index f85bcdec4e185..97986042c9e7b 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -2938,6 +2938,53 @@ var canUseDOM = !!(
   typeof window.document.createElement !== "undefined"
 );
 
+var hasReadOnlyValue = {
+  button: true,
+  checkbox: true,
+  image: true,
+  hidden: true,
+  radio: true,
+  reset: true,
+  submit: true
+};
+function checkControlledValueProps(tagName, props) {
+  {
+    if (
+      !(
+        hasReadOnlyValue[props.type] ||
+        props.onChange ||
+        props.onInput ||
+        props.readOnly ||
+        props.disabled ||
+        props.value == null
+      )
+    ) {
+      error(
+        "You provided a `value` prop to a form field without an " +
+          "`onChange` handler. This will render a read-only field. If " +
+          "the field should be mutable use `defaultValue`. Otherwise, " +
+          "set either `onChange` or `readOnly`."
+      );
+    }
+
+    if (
+      !(
+        props.onChange ||
+        props.readOnly ||
+        props.disabled ||
+        props.checked == null
+      )
+    ) {
+      error(
+        "You provided a `checked` prop to a form field without an " +
+          "`onChange` handler. This will render a read-only field. If " +
+          "the field should be mutable use `defaultChecked`. Otherwise, " +
+          "set either `onChange` or `readOnly`."
+      );
+    }
+  }
+}
+
 /* eslint-disable max-len */
 
 var ATTRIBUTE_NAME_START_CHAR =
@@ -3578,53 +3625,6 @@ function getToStringValue(value) {
   }
 }
 
-var hasReadOnlyValue = {
-  button: true,
-  checkbox: true,
-  image: true,
-  hidden: true,
-  radio: true,
-  reset: true,
-  submit: true
-};
-function checkControlledValueProps(tagName, props) {
-  {
-    if (
-      !(
-        hasReadOnlyValue[props.type] ||
-        props.onChange ||
-        props.onInput ||
-        props.readOnly ||
-        props.disabled ||
-        props.value == null
-      )
-    ) {
-      error(
-        "You provided a `value` prop to a form field without an " +
-          "`onChange` handler. This will render a read-only field. If " +
-          "the field should be mutable use `defaultValue`. Otherwise, " +
-          "set either `onChange` or `readOnly`."
-      );
-    }
-
-    if (
-      !(
-        props.onChange ||
-        props.readOnly ||
-        props.disabled ||
-        props.checked == null
-      )
-    ) {
-      error(
-        "You provided a `checked` prop to a form field without an " +
-          "`onChange` handler. This will render a read-only field. If " +
-          "the field should be mutable use `defaultChecked`. Otherwise, " +
-          "set either `onChange` or `readOnly`."
-      );
-    }
-  }
-}
-
 function isCheckable(elem) {
   var type = elem.type;
   var nodeName = elem.nodeName;
@@ -3732,7 +3732,7 @@ function trackValueOnNode(node) {
 function track(node) {
   if (getTracker(node)) {
     return;
-  } // TODO: Once it's just Fiber we can move this to node._wrapperState
+  }
 
   node._valueTracker = trackValueOnNode(node);
 }
@@ -3775,13 +3775,6 @@ function getActiveElement(doc) {
 
 var didWarnValueDefaultValue$1 = false;
 var didWarnCheckedDefaultChecked = false;
-var didWarnControlledToUncontrolled = false;
-var didWarnUncontrolledToControlled = false;
-
-function isControlled(props) {
-  var usesChecked = props.type === "checkbox" || props.type === "radio";
-  return usesChecked ? props.checked != null : props.value != null;
-}
 /**
  * Implements an <input> host component that allows setting these optional
  * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
@@ -3799,10 +3792,11 @@ function isControlled(props) {
  * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
  */
 
-function initWrapperState$2(element, props) {
+function validateInputProps(element, props) {
   {
-    checkControlledValueProps("input", props);
-
+    // Normally we check for undefined and null the same, but explicitly specifying both
+    // properties, at all is probably worth warning for. We could move this either direction
+    // and just make it ok to pass null or just check hasOwnProperty.
     if (
       props.checked !== undefined &&
       props.defaultChecked !== undefined &&
@@ -3841,23 +3835,8 @@ function initWrapperState$2(element, props) {
       didWarnValueDefaultValue$1 = true;
     }
   }
-
-  var node = element;
-  var defaultValue = props.defaultValue == null ? "" : props.defaultValue;
-  var initialChecked =
-    props.checked != null ? props.checked : props.defaultChecked;
-  node._wrapperState = {
-    initialChecked:
-      typeof initialChecked !== "function" &&
-      typeof initialChecked !== "symbol" &&
-      !!initialChecked,
-    initialValue: getToStringValue(
-      props.value != null ? props.value : defaultValue
-    ),
-    controlled: isControlled(props)
-  };
 }
-function updateChecked(element, props) {
+function updateInputChecked(element, props) {
   var node = element;
   var checked = props.checked;
 
@@ -3865,75 +3844,19 @@ function updateChecked(element, props) {
     node.checked = checked;
   }
 }
-function updateWrapper$1(element, props) {
+function updateInput(element, props) {
   var node = element;
-
-  {
-    var controlled = isControlled(props);
-
-    if (
-      !node._wrapperState.controlled &&
-      controlled &&
-      !didWarnUncontrolledToControlled
-    ) {
-      error(
-        "A component is changing an uncontrolled input to be controlled. " +
-          "This is likely caused by the value changing from undefined to " +
-          "a defined value, which should not happen. " +
-          "Decide between using a controlled or uncontrolled input " +
-          "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
-      );
-
-      didWarnUncontrolledToControlled = true;
-    }
-
-    if (
-      node._wrapperState.controlled &&
-      !controlled &&
-      !didWarnControlledToUncontrolled
-    ) {
-      error(
-        "A component is changing a controlled input to be uncontrolled. " +
-          "This is likely caused by the value changing from a defined to " +
-          "undefined, which should not happen. " +
-          "Decide between using a controlled or uncontrolled input " +
-          "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
-      );
-
-      didWarnControlledToUncontrolled = true;
-    }
-  }
-
-  updateChecked(element, props);
   var value = getToStringValue(props.value);
   var type = props.type;
 
-  if (value != null) {
-    if (type === "number") {
-      if (
-        // $FlowFixMe[incompatible-type]
-        (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible.
-        // eslint-disable-next-line
-        node.value != value
-      ) {
-        node.value = toString(value);
-      }
-    } else if (node.value !== toString(value)) {
-      node.value = toString(value);
-    }
-  } else if (type === "submit" || type === "reset") {
-    // Submit/reset inputs need the attribute removed completely to avoid
-    // blank-text buttons.
-    node.removeAttribute("value");
-    return;
-  }
-
   if (disableInputAttributeSyncing) {
     // When not syncing the value attribute, React only assigns a new value
     // whenever the defaultValue React prop has changed. When not present,
     // React does nothing
-    if (props.hasOwnProperty("defaultValue")) {
+    if (props.defaultValue != null) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
+    } else {
+      node.removeAttribute("value");
     }
   } else {
     // When syncing the value attribute, the value comes from a cascade of
@@ -3941,10 +3864,12 @@ function updateWrapper$1(element, props) {
     //  1. The value React property
     //  2. The defaultValue React property
     //  3. Otherwise there should be no change
-    if (props.hasOwnProperty("value")) {
+    if (props.value != null) {
       setDefaultValue(node, props.type, value);
-    } else if (props.hasOwnProperty("defaultValue")) {
+    } else if (props.defaultValue != null) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
+    } else {
+      node.removeAttribute("value");
     }
   }
 
@@ -3964,12 +3889,33 @@ function updateWrapper$1(element, props) {
       node.defaultChecked = !!props.defaultChecked;
     }
   }
+
+  updateInputChecked(element, props);
+
+  if (value != null) {
+    if (type === "number") {
+      if (
+        // $FlowFixMe[incompatible-type]
+        (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible.
+        // eslint-disable-next-line
+        node.value != value
+      ) {
+        node.value = toString(value);
+      }
+    } else if (node.value !== toString(value)) {
+      node.value = toString(value);
+    }
+  } else if (type === "submit" || type === "reset") {
+    // Submit/reset inputs need the attribute removed completely to avoid
+    // blank-text buttons.
+    node.removeAttribute("value");
+    return;
+  }
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  var node = element; // Do not assign value if it is already set. This prevents user text input
-  // from being lost during SSR hydration.
+function initInput(element, props, isHydrating) {
+  var node = element;
 
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+  if (props.value != null || props.defaultValue != null) {
     var type = props.type;
     var isButton = type === "submit" || type === "reset"; // Avoid setting value attribute on submit/reset inputs as it overrides the
     // default value provided by the browser. See: #12872
@@ -3978,7 +3924,14 @@ function postMountWrapper$3(element, props, isHydrating) {
       return;
     }
 
-    var initialValue = toString(node._wrapperState.initialValue); // Do not assign value if it is already set. This prevents user text input
+    var defaultValue =
+      props.defaultValue != null
+        ? toString(getToStringValue(props.defaultValue))
+        : "";
+    var initialValue =
+      props.value != null
+        ? toString(getToStringValue(props.value))
+        : defaultValue; // Do not assign value if it is already set. This prevents user text input
     // from being lost during SSR hydration.
 
     if (!isHydrating) {
@@ -4015,10 +3968,8 @@ function postMountWrapper$3(element, props, isHydrating) {
     if (disableInputAttributeSyncing) {
       // When not syncing the value attribute, assign the value attribute
       // directly from the defaultValue React property (when present)
-      var defaultValue = getToStringValue(props.defaultValue);
-
-      if (defaultValue != null) {
-        node.defaultValue = toString(defaultValue);
+      if (props.defaultValue != null) {
+        node.defaultValue = defaultValue;
       }
     } else {
       // Otherwise, the value attribute is synchronized to the property,
@@ -4036,21 +3987,28 @@ function postMountWrapper$3(element, props, isHydrating) {
 
   if (name !== "") {
     node.name = "";
-  } // The checked property never gets assigned. It must be manually set.
+  }
+
+  var defaultChecked =
+    props.checked != null ? props.checked : props.defaultChecked;
+  var initialChecked =
+    typeof defaultChecked !== "function" &&
+    typeof defaultChecked !== "symbol" &&
+    !!defaultChecked; // The checked property never gets assigned. It must be manually set.
   // We don't want to do this when hydrating so that existing user input isn't
   // modified
   // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
   // correct for the hydration case then.
 
   if (!isHydrating) {
-    node.checked = !!node._wrapperState.initialChecked;
+    node.checked = !!initialChecked;
   }
 
   if (disableInputAttributeSyncing) {
     // Only assign the checked attribute if it is defined. This saves
     // a DOM write when controlling the checked attribute isn't needed
     // (text inputs, submit/reset)
-    if (props.hasOwnProperty("defaultChecked")) {
+    if (props.defaultChecked != null) {
       node.defaultChecked = !node.defaultChecked;
       node.defaultChecked = !!props.defaultChecked;
     }
@@ -4062,16 +4020,16 @@ function postMountWrapper$3(element, props, isHydrating) {
     //   2. The defaultChecked React property when present
     //   3. Otherwise, false
     node.defaultChecked = !node.defaultChecked;
-    node.defaultChecked = !!node._wrapperState.initialChecked;
+    node.defaultChecked = !!initialChecked;
   }
 
   if (name !== "") {
     node.name = name;
   }
 }
-function restoreControlledState$3(element, props) {
+function restoreControlledInputState(element, props) {
   var node = element;
-  updateWrapper$1(node, props);
+  updateInput(node, props);
   updateNamedCousins(node, props);
 }
 
@@ -4123,7 +4081,7 @@ function updateNamedCousins(rootNode, props) {
       // was previously checked to update will cause it to be come re-checked
       // as appropriate.
 
-      updateWrapper$1(otherNode, otherProps);
+      updateInput(otherNode, otherProps);
     }
   }
 } // In Chrome, assigning defaultValue to certain input types triggers input validation.
@@ -4141,9 +4099,7 @@ function setDefaultValue(node, type, value) {
     type !== "number" ||
     getActiveElement(node.ownerDocument) !== node
   ) {
-    if (value == null) {
-      node.defaultValue = toString(node._wrapperState.initialValue);
-    } else if (node.defaultValue !== toString(value)) {
+    if (node.defaultValue !== toString(value)) {
       node.defaultValue = toString(value);
     }
   }
@@ -4156,7 +4112,7 @@ var didWarnInvalidInnerHTML = false;
  * Implements an <option> host component that warns when `selected` is set.
  */
 
-function validateProps(element, props) {
+function validateOptionProps(element, props) {
   {
     // If a value is not provided, then the children must be simple.
     if (props.value == null) {
@@ -4201,7 +4157,7 @@ function validateProps(element, props) {
     }
   }
 }
-function postMountWrapper$2(element, props) {
+function initOption(element, props) {
   // value="" should make a value attribute (#6219)
   if (props.value != null) {
     element.setAttribute("value", toString(getToStringValue(props.value)));
@@ -4237,8 +4193,6 @@ var valuePropNames = ["value", "defaultValue"];
 
 function checkSelectPropTypes(props) {
   {
-    checkControlledValueProps("select", props);
-
     for (var i = 0; i < valuePropNames.length; i++) {
       var propName = valuePropNames[i];
 
@@ -4334,18 +4288,10 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
  * selected.
  */
 
-function initWrapperState$1(element, props) {
-  var node = element;
-
+function validateSelectProps(element, props) {
   {
     checkSelectPropTypes(props);
-  }
 
-  node._wrapperState = {
-    wasMultiple: !!props.multiple
-  };
-
-  {
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -4363,7 +4309,7 @@ function initWrapperState$1(element, props) {
     }
   }
 }
-function postMountWrapper$1(element, props) {
+function initSelect(element, props) {
   var node = element;
   node.multiple = !!props.multiple;
   var value = props.value;
@@ -4374,10 +4320,9 @@ function postMountWrapper$1(element, props) {
     updateOptions(node, !!props.multiple, props.defaultValue, true);
   }
 }
-function postUpdateWrapper(element, props) {
+function updateSelect(element, prevProps, props) {
   var node = element;
-  var wasMultiple = node._wrapperState.wasMultiple;
-  node._wrapperState.wasMultiple = !!props.multiple;
+  var wasMultiple = !!prevProps.multiple;
   var value = props.value;
 
   if (value != null) {
@@ -4392,7 +4337,7 @@ function postUpdateWrapper(element, props) {
     }
   }
 }
-function restoreControlledState$2(element, props) {
+function restoreControlledSelectState(element, props) {
   var node = element;
   var value = props.value;
 
@@ -4418,12 +4363,8 @@ var didWarnValDefaultVal = false;
  * `defaultValue` if specified, or the children content (deprecated).
  */
 
-function initWrapperState(element, props) {
-  var node = element;
-
+function validateTextareaProps(element, props) {
   {
-    checkControlledValueProps("textarea", props);
-
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -4441,8 +4382,42 @@ function initWrapperState(element, props) {
 
       didWarnValDefaultVal = true;
     }
+
+    if (props.children != null && props.value == null) {
+      error(
+        "Use the `defaultValue` or `value` props instead of setting " +
+          "children on <textarea>."
+      );
+    }
   }
+}
+function updateTextarea(element, props) {
+  var node = element;
+  var value = getToStringValue(props.value);
+  var defaultValue = getToStringValue(props.defaultValue);
+
+  if (defaultValue != null) {
+    node.defaultValue = toString(defaultValue);
+  } else {
+    node.defaultValue = "";
+  }
+
+  if (value != null) {
+    // Cast `value` to a string to ensure the value is set correctly. While
+    // browsers typically do this as necessary, jsdom doesn't.
+    var newValue = toString(value); // To avoid side effects (such as losing text selection), only set value if changed
+
+    if (newValue !== node.value) {
+      node.value = newValue;
+    } // TOOO: This should respect disableInputAttributeSyncing flag.
 
+    if (props.defaultValue == null && node.defaultValue !== newValue) {
+      node.defaultValue = newValue;
+    }
+  }
+}
+function initTextarea(element, props) {
+  var node = element;
   var initialValue = props.value; // Only bother fetching default value if we're going to use it
 
   if (initialValue == null) {
@@ -4450,13 +4425,6 @@ function initWrapperState(element, props) {
       defaultValue = props.defaultValue;
 
     if (children != null) {
-      {
-        error(
-          "Use the `defaultValue` or `value` props instead of setting " +
-            "children on <textarea>."
-        );
-      }
-
       {
         if (defaultValue != null) {
           throw new Error(
@@ -4485,36 +4453,7 @@ function initWrapperState(element, props) {
 
   var stringValue = getToStringValue(initialValue);
   node.defaultValue = stringValue; // This will be toString:ed.
-
-  node._wrapperState = {
-    initialValue: stringValue
-  };
-}
-function updateWrapper(element, props) {
-  var node = element;
-  var value = getToStringValue(props.value);
-  var defaultValue = getToStringValue(props.defaultValue);
-
-  if (value != null) {
-    // Cast `value` to a string to ensure the value is set correctly. While
-    // browsers typically do this as necessary, jsdom doesn't.
-    var newValue = toString(value); // To avoid side effects (such as losing text selection), only set value if changed
-
-    if (newValue !== node.value) {
-      node.value = newValue;
-    }
-
-    if (props.defaultValue == null && node.defaultValue !== newValue) {
-      node.defaultValue = newValue;
-    }
-  }
-
-  if (defaultValue != null) {
-    node.defaultValue = toString(defaultValue);
-  }
-}
-function postMountWrapper(element, props) {
-  var node = element; // This is in postMount because we need access to the DOM node, which is not
+  // This is in postMount because we need access to the DOM node, which is not
   // available until after the component has mounted.
 
   var textContent = node.textContent; // Only set node.value if textContent is equal to the expected
@@ -4522,15 +4461,15 @@ function postMountWrapper(element, props) {
   // will populate textContent as well.
   // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
 
-  if (textContent === node._wrapperState.initialValue) {
+  if (textContent === stringValue) {
     if (textContent !== "" && textContent !== null) {
       node.value = textContent;
     }
   }
 }
-function restoreControlledState$1(element, props) {
+function restoreControlledTextareaState(element, props) {
   // DOM component is still mounted; update
-  updateWrapper(element, props);
+  updateTextarea(element, props);
 }
 
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -6472,6 +6411,8 @@ function sanitizeURL(url) {
   return url;
 }
 
+var didWarnControlledToUncontrolled = false;
+var didWarnUncontrolledToControlled = false;
 var didWarnInvalidHydration = false;
 var canDiffStyleForHydrationWarning;
 
@@ -7257,7 +7198,9 @@ function setInitialProperties(domElement, tag, props) {
     }
 
     case "input": {
-      initWrapperState$2(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("input", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -7293,10 +7236,9 @@ function setInitialProperties(domElement, tag, props) {
           }
 
           case "checked": {
-            var node = domElement;
-            var checked =
-              propValue != null ? propValue : node._wrapperState.initialChecked;
-            node.checked =
+            var checked = propValue != null ? propValue : props.defaultChecked;
+            var inputElement = domElement;
+            inputElement.checked =
               !!checked &&
               typeof checked !== "function" &&
               checked !== "symbol";
@@ -7330,12 +7272,15 @@ function setInitialProperties(domElement, tag, props) {
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper$3(domElement, props, false);
+      validateInputProps(domElement, props);
+      initInput(domElement, props, false);
       return;
     }
 
     case "select": {
-      initWrapperState$1(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("select", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -7364,12 +7309,15 @@ function setInitialProperties(domElement, tag, props) {
         }
       }
 
-      postMountWrapper$1(domElement, props);
+      validateSelectProps(domElement, props);
+      initSelect(domElement, props);
       return;
     }
 
     case "textarea": {
-      initWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("textarea", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -7416,12 +7364,13 @@ function setInitialProperties(domElement, tag, props) {
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper(domElement);
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, props);
       return;
     }
 
     case "option": {
-      validateProps(domElement, props);
+      validateOptionProps(domElement, props);
 
       for (var _propKey3 in props) {
         if (!props.hasOwnProperty(_propKey3)) {
@@ -7450,7 +7399,7 @@ function setInitialProperties(domElement, tag, props) {
         }
       }
 
-      postMountWrapper$2(domElement, props);
+      initOption(domElement, props);
       return;
     }
 
@@ -7736,7 +7685,7 @@ function updateProperties(
       // In the middle of an update, it is possible to have multiple checked.
       // When a checked radio tries to change name, browser makes another radio's checked false.
       if (nextProps.type === "radio" && nextProps.name != null) {
-        updateChecked(domElement, nextProps);
+        updateInputChecked(domElement, nextProps);
       }
 
       for (var i = 0; i < updatePayload.length; i += 2) {
@@ -7745,10 +7694,10 @@ function updateProperties(
 
         switch (propKey) {
           case "checked": {
-            var node = domElement;
             var checked =
-              propValue != null ? propValue : node._wrapperState.initialChecked;
-            node.checked =
+              propValue != null ? propValue : nextProps.defaultChecked;
+            var inputElement = domElement;
+            inputElement.checked =
               !!checked &&
               typeof checked !== "function" &&
               checked !== "symbol";
@@ -7778,11 +7727,54 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
           }
         }
+      }
+
+      {
+        var wasControlled =
+          lastProps.type === "checkbox" || lastProps.type === "radio"
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        var isControlled =
+          nextProps.type === "checkbox" || nextProps.type === "radio"
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          error(
+            "A component is changing an uncontrolled input to be controlled. " +
+              "This is likely caused by the value changing from undefined to " +
+              "a defined value, which should not happen. " +
+              "Decide between using a controlled or uncontrolled input " +
+              "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
+          );
+
+          didWarnUncontrolledToControlled = true;
+        }
+
+        if (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          error(
+            "A component is changing a controlled input to be uncontrolled. " +
+              "This is likely caused by the value changing from a defined to " +
+              "undefined, which should not happen. " +
+              "Decide between using a controlled or uncontrolled input " +
+              "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
+          );
+
+          didWarnControlledToUncontrolled = true;
+        }
       } // Update the wrapper around inputs *after* updating props. This has to
       // happen after updating the rest of props. Otherwise HTML5 input validations
       // raise warnings and prevent the new value from being assigned.
 
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     }
 
@@ -7805,7 +7797,7 @@ function updateProperties(
       } // <select> value update needs to occur after <option> children
       // reconciliation
 
-      postUpdateWrapper(domElement, nextProps);
+      updateSelect(domElement, lastProps, nextProps);
       return;
     }
 
@@ -7843,7 +7835,7 @@ function updateProperties(
         }
       }
 
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     }
 
@@ -8915,41 +8907,50 @@ function diffHydratedProperties(
       break;
 
     case "input":
-      initWrapperState$2(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("input", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement); // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
 
-      track(domElement); // For input and textarea we current always set the value property at
+      track(domElement);
+      validateInputProps(domElement, props); // For input and textarea we current always set the value property at
       // post mount to force it to diverge from attributes. However, for
       // option and select we don't quite do the same thing and select
       // is not resilient to the DOM state changing so we don't do that here.
       // TODO: Consider not doing this for input and textarea.
 
-      postMountWrapper$3(domElement, props, true);
+      initInput(domElement, props, true);
       break;
 
     case "option":
-      validateProps(domElement, props);
+      validateOptionProps(domElement, props);
       break;
 
     case "select":
-      initWrapperState$1(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("select", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
+      validateSelectProps(domElement, props);
       break;
 
     case "textarea":
-      initWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("textarea", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement); // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper(domElement);
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, props);
       break;
   }
 
@@ -9116,15 +9117,15 @@ function warnForInsertedHydratedText(parentNode, text) {
 function restoreControlledState(domElement, tag, props) {
   switch (tag) {
     case "input":
-      restoreControlledState$3(domElement, props);
+      restoreControlledInputState(domElement, props);
       return;
 
     case "textarea":
-      restoreControlledState$1(domElement, props);
+      restoreControlledTextareaState(domElement, props);
       return;
 
     case "select":
-      restoreControlledState$2(domElement, props);
+      restoreControlledSelectState(domElement, props);
       return;
   }
 }
@@ -36533,7 +36534,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-9699462b";
+var ReactVersion = "18.3.0-www-classic-1604b498";
 
 function createPortal$1(
   children,
@@ -38734,16 +38735,18 @@ function getTargetInstForInputOrChangeEvent(domEventName, targetInst) {
   }
 }
 
-function handleControlledInputBlur(node) {
-  var state = node._wrapperState;
-
-  if (!state || !state.controlled || node.type !== "number") {
+function handleControlledInputBlur(node, props) {
+  if (node.type !== "number") {
     return;
   }
 
   if (!disableInputAttributeSyncing) {
-    // If controlled, assign the value attribute to the current value on blur
-    setDefaultValue(node, "number", node.value);
+    var isControlled = props.value != null;
+
+    if (isControlled) {
+      // If controlled, assign the value attribute to the current value on blur
+      setDefaultValue(node, "number", node.value);
+    }
   }
 }
 /**
@@ -38806,8 +38809,12 @@ function extractEvents$4(
     handleEventFunc(domEventName, targetNode, targetInst);
   } // When blurring, set the value attribute for number inputs
 
-  if (domEventName === "focusout") {
-    handleControlledInputBlur(targetNode);
+  if (domEventName === "focusout" && targetInst) {
+    // These props aren't necessarily the most current but we warn for changing
+    // between controlled and uncontrolled, so it doesn't matter and the previous
+    // code was also broken for changes.
+    var props = targetInst.memoizedProps;
+    handleControlledInputBlur(targetNode, props);
   }
 }
 
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
index 11d3f2f2b4cca..c8e080aa2af7b 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -2604,6 +2604,53 @@ var canUseDOM = !!(
   typeof window.document.createElement !== "undefined"
 );
 
+var hasReadOnlyValue = {
+  button: true,
+  checkbox: true,
+  image: true,
+  hidden: true,
+  radio: true,
+  reset: true,
+  submit: true
+};
+function checkControlledValueProps(tagName, props) {
+  {
+    if (
+      !(
+        hasReadOnlyValue[props.type] ||
+        props.onChange ||
+        props.onInput ||
+        props.readOnly ||
+        props.disabled ||
+        props.value == null
+      )
+    ) {
+      error(
+        "You provided a `value` prop to a form field without an " +
+          "`onChange` handler. This will render a read-only field. If " +
+          "the field should be mutable use `defaultValue`. Otherwise, " +
+          "set either `onChange` or `readOnly`."
+      );
+    }
+
+    if (
+      !(
+        props.onChange ||
+        props.readOnly ||
+        props.disabled ||
+        props.checked == null
+      )
+    ) {
+      error(
+        "You provided a `checked` prop to a form field without an " +
+          "`onChange` handler. This will render a read-only field. If " +
+          "the field should be mutable use `defaultChecked`. Otherwise, " +
+          "set either `onChange` or `readOnly`."
+      );
+    }
+  }
+}
+
 /* eslint-disable max-len */
 
 var ATTRIBUTE_NAME_START_CHAR =
@@ -3514,53 +3561,6 @@ function getToStringValue(value) {
   }
 }
 
-var hasReadOnlyValue = {
-  button: true,
-  checkbox: true,
-  image: true,
-  hidden: true,
-  radio: true,
-  reset: true,
-  submit: true
-};
-function checkControlledValueProps(tagName, props) {
-  {
-    if (
-      !(
-        hasReadOnlyValue[props.type] ||
-        props.onChange ||
-        props.onInput ||
-        props.readOnly ||
-        props.disabled ||
-        props.value == null
-      )
-    ) {
-      error(
-        "You provided a `value` prop to a form field without an " +
-          "`onChange` handler. This will render a read-only field. If " +
-          "the field should be mutable use `defaultValue`. Otherwise, " +
-          "set either `onChange` or `readOnly`."
-      );
-    }
-
-    if (
-      !(
-        props.onChange ||
-        props.readOnly ||
-        props.disabled ||
-        props.checked == null
-      )
-    ) {
-      error(
-        "You provided a `checked` prop to a form field without an " +
-          "`onChange` handler. This will render a read-only field. If " +
-          "the field should be mutable use `defaultChecked`. Otherwise, " +
-          "set either `onChange` or `readOnly`."
-      );
-    }
-  }
-}
-
 function isCheckable(elem) {
   var type = elem.type;
   var nodeName = elem.nodeName;
@@ -3668,7 +3668,7 @@ function trackValueOnNode(node) {
 function track(node) {
   if (getTracker(node)) {
     return;
-  } // TODO: Once it's just Fiber we can move this to node._wrapperState
+  }
 
   node._valueTracker = trackValueOnNode(node);
 }
@@ -3711,13 +3711,6 @@ function getActiveElement(doc) {
 
 var didWarnValueDefaultValue$1 = false;
 var didWarnCheckedDefaultChecked = false;
-var didWarnControlledToUncontrolled = false;
-var didWarnUncontrolledToControlled = false;
-
-function isControlled(props) {
-  var usesChecked = props.type === "checkbox" || props.type === "radio";
-  return usesChecked ? props.checked != null : props.value != null;
-}
 /**
  * Implements an <input> host component that allows setting these optional
  * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
@@ -3735,10 +3728,11 @@ function isControlled(props) {
  * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
  */
 
-function initWrapperState$2(element, props) {
+function validateInputProps(element, props) {
   {
-    checkControlledValueProps("input", props);
-
+    // Normally we check for undefined and null the same, but explicitly specifying both
+    // properties, at all is probably worth warning for. We could move this either direction
+    // and just make it ok to pass null or just check hasOwnProperty.
     if (
       props.checked !== undefined &&
       props.defaultChecked !== undefined &&
@@ -3777,23 +3771,8 @@ function initWrapperState$2(element, props) {
       didWarnValueDefaultValue$1 = true;
     }
   }
-
-  var node = element;
-  var defaultValue = props.defaultValue == null ? "" : props.defaultValue;
-  var initialChecked =
-    props.checked != null ? props.checked : props.defaultChecked;
-  node._wrapperState = {
-    initialChecked:
-      typeof initialChecked !== "function" &&
-      typeof initialChecked !== "symbol" &&
-      !!initialChecked,
-    initialValue: getToStringValue(
-      props.value != null ? props.value : defaultValue
-    ),
-    controlled: isControlled(props)
-  };
 }
-function updateChecked(element, props) {
+function updateInputChecked(element, props) {
   var node = element;
   var checked = props.checked;
 
@@ -3801,75 +3780,19 @@ function updateChecked(element, props) {
     node.checked = checked;
   }
 }
-function updateWrapper$1(element, props) {
+function updateInput(element, props) {
   var node = element;
-
-  {
-    var controlled = isControlled(props);
-
-    if (
-      !node._wrapperState.controlled &&
-      controlled &&
-      !didWarnUncontrolledToControlled
-    ) {
-      error(
-        "A component is changing an uncontrolled input to be controlled. " +
-          "This is likely caused by the value changing from undefined to " +
-          "a defined value, which should not happen. " +
-          "Decide between using a controlled or uncontrolled input " +
-          "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
-      );
-
-      didWarnUncontrolledToControlled = true;
-    }
-
-    if (
-      node._wrapperState.controlled &&
-      !controlled &&
-      !didWarnControlledToUncontrolled
-    ) {
-      error(
-        "A component is changing a controlled input to be uncontrolled. " +
-          "This is likely caused by the value changing from a defined to " +
-          "undefined, which should not happen. " +
-          "Decide between using a controlled or uncontrolled input " +
-          "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
-      );
-
-      didWarnControlledToUncontrolled = true;
-    }
-  }
-
-  updateChecked(element, props);
   var value = getToStringValue(props.value);
   var type = props.type;
 
-  if (value != null) {
-    if (type === "number") {
-      if (
-        // $FlowFixMe[incompatible-type]
-        (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible.
-        // eslint-disable-next-line
-        node.value != value
-      ) {
-        node.value = toString(value);
-      }
-    } else if (node.value !== toString(value)) {
-      node.value = toString(value);
-    }
-  } else if (type === "submit" || type === "reset") {
-    // Submit/reset inputs need the attribute removed completely to avoid
-    // blank-text buttons.
-    node.removeAttribute("value");
-    return;
-  }
-
   if (disableInputAttributeSyncing) {
     // When not syncing the value attribute, React only assigns a new value
     // whenever the defaultValue React prop has changed. When not present,
     // React does nothing
-    if (props.hasOwnProperty("defaultValue")) {
+    if (props.defaultValue != null) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
+    } else {
+      node.removeAttribute("value");
     }
   } else {
     // When syncing the value attribute, the value comes from a cascade of
@@ -3877,10 +3800,12 @@ function updateWrapper$1(element, props) {
     //  1. The value React property
     //  2. The defaultValue React property
     //  3. Otherwise there should be no change
-    if (props.hasOwnProperty("value")) {
+    if (props.value != null) {
       setDefaultValue(node, props.type, value);
-    } else if (props.hasOwnProperty("defaultValue")) {
+    } else if (props.defaultValue != null) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
+    } else {
+      node.removeAttribute("value");
     }
   }
 
@@ -3900,12 +3825,33 @@ function updateWrapper$1(element, props) {
       node.defaultChecked = !!props.defaultChecked;
     }
   }
+
+  updateInputChecked(element, props);
+
+  if (value != null) {
+    if (type === "number") {
+      if (
+        // $FlowFixMe[incompatible-type]
+        (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible.
+        // eslint-disable-next-line
+        node.value != value
+      ) {
+        node.value = toString(value);
+      }
+    } else if (node.value !== toString(value)) {
+      node.value = toString(value);
+    }
+  } else if (type === "submit" || type === "reset") {
+    // Submit/reset inputs need the attribute removed completely to avoid
+    // blank-text buttons.
+    node.removeAttribute("value");
+    return;
+  }
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  var node = element; // Do not assign value if it is already set. This prevents user text input
-  // from being lost during SSR hydration.
+function initInput(element, props, isHydrating) {
+  var node = element;
 
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+  if (props.value != null || props.defaultValue != null) {
     var type = props.type;
     var isButton = type === "submit" || type === "reset"; // Avoid setting value attribute on submit/reset inputs as it overrides the
     // default value provided by the browser. See: #12872
@@ -3914,7 +3860,14 @@ function postMountWrapper$3(element, props, isHydrating) {
       return;
     }
 
-    var initialValue = toString(node._wrapperState.initialValue); // Do not assign value if it is already set. This prevents user text input
+    var defaultValue =
+      props.defaultValue != null
+        ? toString(getToStringValue(props.defaultValue))
+        : "";
+    var initialValue =
+      props.value != null
+        ? toString(getToStringValue(props.value))
+        : defaultValue; // Do not assign value if it is already set. This prevents user text input
     // from being lost during SSR hydration.
 
     if (!isHydrating) {
@@ -3951,10 +3904,8 @@ function postMountWrapper$3(element, props, isHydrating) {
     if (disableInputAttributeSyncing) {
       // When not syncing the value attribute, assign the value attribute
       // directly from the defaultValue React property (when present)
-      var defaultValue = getToStringValue(props.defaultValue);
-
-      if (defaultValue != null) {
-        node.defaultValue = toString(defaultValue);
+      if (props.defaultValue != null) {
+        node.defaultValue = defaultValue;
       }
     } else {
       // Otherwise, the value attribute is synchronized to the property,
@@ -3972,21 +3923,28 @@ function postMountWrapper$3(element, props, isHydrating) {
 
   if (name !== "") {
     node.name = "";
-  } // The checked property never gets assigned. It must be manually set.
+  }
+
+  var defaultChecked =
+    props.checked != null ? props.checked : props.defaultChecked;
+  var initialChecked =
+    typeof defaultChecked !== "function" &&
+    typeof defaultChecked !== "symbol" &&
+    !!defaultChecked; // The checked property never gets assigned. It must be manually set.
   // We don't want to do this when hydrating so that existing user input isn't
   // modified
   // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
   // correct for the hydration case then.
 
   if (!isHydrating) {
-    node.checked = !!node._wrapperState.initialChecked;
+    node.checked = !!initialChecked;
   }
 
   if (disableInputAttributeSyncing) {
     // Only assign the checked attribute if it is defined. This saves
     // a DOM write when controlling the checked attribute isn't needed
     // (text inputs, submit/reset)
-    if (props.hasOwnProperty("defaultChecked")) {
+    if (props.defaultChecked != null) {
       node.defaultChecked = !node.defaultChecked;
       node.defaultChecked = !!props.defaultChecked;
     }
@@ -3998,16 +3956,16 @@ function postMountWrapper$3(element, props, isHydrating) {
     //   2. The defaultChecked React property when present
     //   3. Otherwise, false
     node.defaultChecked = !node.defaultChecked;
-    node.defaultChecked = !!node._wrapperState.initialChecked;
+    node.defaultChecked = !!initialChecked;
   }
 
   if (name !== "") {
     node.name = name;
   }
 }
-function restoreControlledState$3(element, props) {
+function restoreControlledInputState(element, props) {
   var node = element;
-  updateWrapper$1(node, props);
+  updateInput(node, props);
   updateNamedCousins(node, props);
 }
 
@@ -4059,7 +4017,7 @@ function updateNamedCousins(rootNode, props) {
       // was previously checked to update will cause it to be come re-checked
       // as appropriate.
 
-      updateWrapper$1(otherNode, otherProps);
+      updateInput(otherNode, otherProps);
     }
   }
 } // In Chrome, assigning defaultValue to certain input types triggers input validation.
@@ -4077,9 +4035,7 @@ function setDefaultValue(node, type, value) {
     type !== "number" ||
     getActiveElement(node.ownerDocument) !== node
   ) {
-    if (value == null) {
-      node.defaultValue = toString(node._wrapperState.initialValue);
-    } else if (node.defaultValue !== toString(value)) {
+    if (node.defaultValue !== toString(value)) {
       node.defaultValue = toString(value);
     }
   }
@@ -4092,7 +4048,7 @@ var didWarnInvalidInnerHTML = false;
  * Implements an <option> host component that warns when `selected` is set.
  */
 
-function validateProps(element, props) {
+function validateOptionProps(element, props) {
   {
     // If a value is not provided, then the children must be simple.
     if (props.value == null) {
@@ -4137,7 +4093,7 @@ function validateProps(element, props) {
     }
   }
 }
-function postMountWrapper$2(element, props) {
+function initOption(element, props) {
   // value="" should make a value attribute (#6219)
   if (props.value != null) {
     element.setAttribute("value", toString(getToStringValue(props.value)));
@@ -4173,8 +4129,6 @@ var valuePropNames = ["value", "defaultValue"];
 
 function checkSelectPropTypes(props) {
   {
-    checkControlledValueProps("select", props);
-
     for (var i = 0; i < valuePropNames.length; i++) {
       var propName = valuePropNames[i];
 
@@ -4270,18 +4224,10 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
  * selected.
  */
 
-function initWrapperState$1(element, props) {
-  var node = element;
-
+function validateSelectProps(element, props) {
   {
     checkSelectPropTypes(props);
-  }
 
-  node._wrapperState = {
-    wasMultiple: !!props.multiple
-  };
-
-  {
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -4299,7 +4245,7 @@ function initWrapperState$1(element, props) {
     }
   }
 }
-function postMountWrapper$1(element, props) {
+function initSelect(element, props) {
   var node = element;
   node.multiple = !!props.multiple;
   var value = props.value;
@@ -4310,10 +4256,9 @@ function postMountWrapper$1(element, props) {
     updateOptions(node, !!props.multiple, props.defaultValue, true);
   }
 }
-function postUpdateWrapper(element, props) {
+function updateSelect(element, prevProps, props) {
   var node = element;
-  var wasMultiple = node._wrapperState.wasMultiple;
-  node._wrapperState.wasMultiple = !!props.multiple;
+  var wasMultiple = !!prevProps.multiple;
   var value = props.value;
 
   if (value != null) {
@@ -4328,7 +4273,7 @@ function postUpdateWrapper(element, props) {
     }
   }
 }
-function restoreControlledState$2(element, props) {
+function restoreControlledSelectState(element, props) {
   var node = element;
   var value = props.value;
 
@@ -4354,12 +4299,8 @@ var didWarnValDefaultVal = false;
  * `defaultValue` if specified, or the children content (deprecated).
  */
 
-function initWrapperState(element, props) {
-  var node = element;
-
+function validateTextareaProps(element, props) {
   {
-    checkControlledValueProps("textarea", props);
-
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -4377,42 +4318,26 @@ function initWrapperState(element, props) {
 
       didWarnValDefaultVal = true;
     }
-  }
-
-  var initialValue = props.value; // Only bother fetching default value if we're going to use it
-
-  if (initialValue == null) {
-    var children = props.children,
-      defaultValue = props.defaultValue;
 
-    if (children != null) {
-      {
-        error(
-          "Use the `defaultValue` or `value` props instead of setting " +
-            "children on <textarea>."
-        );
-      }
-    }
-
-    if (defaultValue == null) {
-      defaultValue = "";
+    if (props.children != null && props.value == null) {
+      error(
+        "Use the `defaultValue` or `value` props instead of setting " +
+          "children on <textarea>."
+      );
     }
-
-    initialValue = defaultValue;
   }
-
-  var stringValue = getToStringValue(initialValue);
-  node.defaultValue = stringValue; // This will be toString:ed.
-
-  node._wrapperState = {
-    initialValue: stringValue
-  };
 }
-function updateWrapper(element, props) {
+function updateTextarea(element, props) {
   var node = element;
   var value = getToStringValue(props.value);
   var defaultValue = getToStringValue(props.defaultValue);
 
+  if (defaultValue != null) {
+    node.defaultValue = toString(defaultValue);
+  } else {
+    node.defaultValue = "";
+  }
+
   if (value != null) {
     // Cast `value` to a string to ensure the value is set correctly. While
     // browsers typically do this as necessary, jsdom doesn't.
@@ -4420,19 +4345,30 @@ function updateWrapper(element, props) {
 
     if (newValue !== node.value) {
       node.value = newValue;
-    }
+    } // TOOO: This should respect disableInputAttributeSyncing flag.
 
     if (props.defaultValue == null && node.defaultValue !== newValue) {
       node.defaultValue = newValue;
     }
   }
+}
+function initTextarea(element, props) {
+  var node = element;
+  var initialValue = props.value; // Only bother fetching default value if we're going to use it
 
-  if (defaultValue != null) {
-    node.defaultValue = toString(defaultValue);
+  if (initialValue == null) {
+    var defaultValue = props.defaultValue;
+
+    if (defaultValue == null) {
+      defaultValue = "";
+    }
+
+    initialValue = defaultValue;
   }
-}
-function postMountWrapper(element, props) {
-  var node = element; // This is in postMount because we need access to the DOM node, which is not
+
+  var stringValue = getToStringValue(initialValue);
+  node.defaultValue = stringValue; // This will be toString:ed.
+  // This is in postMount because we need access to the DOM node, which is not
   // available until after the component has mounted.
 
   var textContent = node.textContent; // Only set node.value if textContent is equal to the expected
@@ -4440,15 +4376,15 @@ function postMountWrapper(element, props) {
   // will populate textContent as well.
   // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
 
-  if (textContent === node._wrapperState.initialValue) {
+  if (textContent === stringValue) {
     if (textContent !== "" && textContent !== null) {
       node.value = textContent;
     }
   }
 }
-function restoreControlledState$1(element, props) {
+function restoreControlledTextareaState(element, props) {
   // DOM component is still mounted; update
-  updateWrapper(element, props);
+  updateTextarea(element, props);
 }
 
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -33862,7 +33798,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-c47d08b2";
+var ReactVersion = "18.3.0-www-modern-2b95afab";
 
 function createPortal$1(
   children,
@@ -36724,16 +36660,18 @@ function getTargetInstForInputOrChangeEvent(domEventName, targetInst) {
   }
 }
 
-function handleControlledInputBlur(node) {
-  var state = node._wrapperState;
-
-  if (!state || !state.controlled || node.type !== "number") {
+function handleControlledInputBlur(node, props) {
+  if (node.type !== "number") {
     return;
   }
 
   if (!disableInputAttributeSyncing) {
-    // If controlled, assign the value attribute to the current value on blur
-    setDefaultValue(node, "number", node.value);
+    var isControlled = props.value != null;
+
+    if (isControlled) {
+      // If controlled, assign the value attribute to the current value on blur
+      setDefaultValue(node, "number", node.value);
+    }
   }
 }
 /**
@@ -36796,8 +36734,12 @@ function extractEvents$4(
     handleEventFunc(domEventName, targetNode, targetInst);
   } // When blurring, set the value attribute for number inputs
 
-  if (domEventName === "focusout") {
-    handleControlledInputBlur(targetNode);
+  if (domEventName === "focusout" && targetInst) {
+    // These props aren't necessarily the most current but we warn for changing
+    // between controlled and uncontrolled, so it doesn't matter and the previous
+    // code was also broken for changes.
+    var props = targetInst.memoizedProps;
+    handleControlledInputBlur(targetNode, props);
   }
 }
 
@@ -38802,6 +38744,8 @@ function getListenerSetKey(domEventName, capture) {
   return domEventName + "__" + (capture ? "capture" : "bubble");
 }
 
+var didWarnControlledToUncontrolled = false;
+var didWarnUncontrolledToControlled = false;
 var didWarnInvalidHydration = false;
 var canDiffStyleForHydrationWarning;
 
@@ -39587,7 +39531,9 @@ function setInitialProperties(domElement, tag, props) {
     }
 
     case "input": {
-      initWrapperState$2(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("input", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -39623,10 +39569,9 @@ function setInitialProperties(domElement, tag, props) {
           }
 
           case "checked": {
-            var node = domElement;
-            var checked =
-              propValue != null ? propValue : node._wrapperState.initialChecked;
-            node.checked =
+            var checked = propValue != null ? propValue : props.defaultChecked;
+            var inputElement = domElement;
+            inputElement.checked =
               !!checked &&
               typeof checked !== "function" &&
               checked !== "symbol";
@@ -39660,12 +39605,15 @@ function setInitialProperties(domElement, tag, props) {
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper$3(domElement, props, false);
+      validateInputProps(domElement, props);
+      initInput(domElement, props, false);
       return;
     }
 
     case "select": {
-      initWrapperState$1(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("select", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -39694,12 +39642,15 @@ function setInitialProperties(domElement, tag, props) {
         }
       }
 
-      postMountWrapper$1(domElement, props);
+      validateSelectProps(domElement, props);
+      initSelect(domElement, props);
       return;
     }
 
     case "textarea": {
-      initWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("textarea", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
@@ -39746,12 +39697,13 @@ function setInitialProperties(domElement, tag, props) {
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper(domElement);
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, props);
       return;
     }
 
     case "option": {
-      validateProps(domElement, props);
+      validateOptionProps(domElement, props);
 
       for (var _propKey3 in props) {
         if (!props.hasOwnProperty(_propKey3)) {
@@ -39780,7 +39732,7 @@ function setInitialProperties(domElement, tag, props) {
         }
       }
 
-      postMountWrapper$2(domElement, props);
+      initOption(domElement, props);
       return;
     }
 
@@ -40066,7 +40018,7 @@ function updateProperties(
       // In the middle of an update, it is possible to have multiple checked.
       // When a checked radio tries to change name, browser makes another radio's checked false.
       if (nextProps.type === "radio" && nextProps.name != null) {
-        updateChecked(domElement, nextProps);
+        updateInputChecked(domElement, nextProps);
       }
 
       for (var i = 0; i < updatePayload.length; i += 2) {
@@ -40075,10 +40027,10 @@ function updateProperties(
 
         switch (propKey) {
           case "checked": {
-            var node = domElement;
             var checked =
-              propValue != null ? propValue : node._wrapperState.initialChecked;
-            node.checked =
+              propValue != null ? propValue : nextProps.defaultChecked;
+            var inputElement = domElement;
+            inputElement.checked =
               !!checked &&
               typeof checked !== "function" &&
               checked !== "symbol";
@@ -40108,11 +40060,54 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
           }
         }
+      }
+
+      {
+        var wasControlled =
+          lastProps.type === "checkbox" || lastProps.type === "radio"
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        var isControlled =
+          nextProps.type === "checkbox" || nextProps.type === "radio"
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          error(
+            "A component is changing an uncontrolled input to be controlled. " +
+              "This is likely caused by the value changing from undefined to " +
+              "a defined value, which should not happen. " +
+              "Decide between using a controlled or uncontrolled input " +
+              "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
+          );
+
+          didWarnUncontrolledToControlled = true;
+        }
+
+        if (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          error(
+            "A component is changing a controlled input to be uncontrolled. " +
+              "This is likely caused by the value changing from a defined to " +
+              "undefined, which should not happen. " +
+              "Decide between using a controlled or uncontrolled input " +
+              "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components"
+          );
+
+          didWarnControlledToUncontrolled = true;
+        }
       } // Update the wrapper around inputs *after* updating props. This has to
       // happen after updating the rest of props. Otherwise HTML5 input validations
       // raise warnings and prevent the new value from being assigned.
 
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     }
 
@@ -40135,7 +40130,7 @@ function updateProperties(
       } // <select> value update needs to occur after <option> children
       // reconciliation
 
-      postUpdateWrapper(domElement, nextProps);
+      updateSelect(domElement, lastProps, nextProps);
       return;
     }
 
@@ -40173,7 +40168,7 @@ function updateProperties(
         }
       }
 
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     }
 
@@ -41245,41 +41240,50 @@ function diffHydratedProperties(
       break;
 
     case "input":
-      initWrapperState$2(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("input", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement); // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
 
-      track(domElement); // For input and textarea we current always set the value property at
+      track(domElement);
+      validateInputProps(domElement, props); // For input and textarea we current always set the value property at
       // post mount to force it to diverge from attributes. However, for
       // option and select we don't quite do the same thing and select
       // is not resilient to the DOM state changing so we don't do that here.
       // TODO: Consider not doing this for input and textarea.
 
-      postMountWrapper$3(domElement, props, true);
+      initInput(domElement, props, true);
       break;
 
     case "option":
-      validateProps(domElement, props);
+      validateOptionProps(domElement, props);
       break;
 
     case "select":
-      initWrapperState$1(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("select", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement);
+      validateSelectProps(domElement, props);
       break;
 
     case "textarea":
-      initWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble
+      {
+        checkControlledValueProps("textarea", props);
+      } // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
 
       listenToNonDelegatedEvent("invalid", domElement); // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
 
       track(domElement);
-      postMountWrapper(domElement);
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, props);
       break;
   }
 
@@ -41446,15 +41450,15 @@ function warnForInsertedHydratedText(parentNode, text) {
 function restoreControlledState(domElement, tag, props) {
   switch (tag) {
     case "input":
-      restoreControlledState$3(domElement, props);
+      restoreControlledInputState(domElement, props);
       return;
 
     case "textarea":
-      restoreControlledState$1(domElement, props);
+      restoreControlledTextareaState(domElement, props);
       return;
 
     case "select":
-      restoreControlledState$2(domElement, props);
+      restoreControlledSelectState(domElement, props);
       return;
   }
 }
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
index 709659a9ca116..785b751d67bcb 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
@@ -979,50 +979,22 @@ function getActiveElement(doc) {
     return doc.body;
   }
 }
-function initWrapperState$2(element, props) {
-  var defaultValue = null == props.defaultValue ? "" : props.defaultValue,
-    initialChecked =
-      null != props.checked ? props.checked : props.defaultChecked;
-  defaultValue = getToStringValue(
-    null != props.value ? props.value : defaultValue
-  );
-  element._wrapperState = {
-    initialChecked:
-      "function" !== typeof initialChecked &&
-      "symbol" !== typeof initialChecked &&
-      !!initialChecked,
-    initialValue: defaultValue,
-    controlled:
-      "checkbox" === props.type || "radio" === props.type
-        ? null != props.checked
-        : null != props.value
-  };
-}
-function updateWrapper$1(element, props) {
-  var checked = props.checked;
-  null != checked && (element.checked = checked);
-  checked = getToStringValue(props.value);
-  var type = props.type;
-  if (null != checked)
-    if ("number" === type) {
-      if ((0 === checked && "" === element.value) || element.value != checked)
-        element.value = "" + checked;
-    } else element.value !== "" + checked && (element.value = "" + checked);
-  else if ("submit" === type || "reset" === type) {
-    element.removeAttribute("value");
-    return;
-  }
+function updateInput(element, props) {
+  var value = getToStringValue(props.value),
+    type = props.type;
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
-    : props.hasOwnProperty("value")
-    ? setDefaultValue(element, props.type, checked)
-    : props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(
-        element,
-        props.type,
-        getToStringValue(props.defaultValue)
-      );
+    ? null != props.defaultValue
+      ? setDefaultValue(
+          element,
+          props.type,
+          getToStringValue(props.defaultValue)
+        )
+      : element.removeAttribute("value")
+    : null != props.value
+    ? setDefaultValue(element, props.type, value)
+    : null != props.defaultValue
+    ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
+    : element.removeAttribute("value");
   disableInputAttributeSyncing
     ? null == props.defaultChecked
       ? element.removeAttribute("checked")
@@ -1030,16 +1002,30 @@ function updateWrapper$1(element, props) {
     : null == props.checked &&
       null != props.defaultChecked &&
       (element.defaultChecked = !!props.defaultChecked);
+  props = props.checked;
+  null != props && (element.checked = props);
+  if (null != value)
+    if ("number" === type) {
+      if ((0 === value && "" === element.value) || element.value != value)
+        element.value = "" + value;
+    } else element.value !== "" + value && (element.value = "" + value);
+  else
+    ("submit" !== type && "reset" !== type) || element.removeAttribute("value");
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+function initInput(element, props, isHydrating) {
+  if (null != props.value || null != props.defaultValue) {
     var type = props.type;
     if (
       (type = "submit" === type || "reset" === type) &&
       (void 0 === props.value || null === props.value)
     )
       return;
-    var initialValue = "" + element._wrapperState.initialValue;
+    var defaultValue =
+        null != props.defaultValue
+          ? "" + getToStringValue(props.defaultValue)
+          : "",
+      initialValue =
+        null != props.value ? "" + getToStringValue(props.value) : defaultValue;
     if (!isHydrating)
       if (disableInputAttributeSyncing) {
         var value = getToStringValue(props.value);
@@ -1048,25 +1034,28 @@ function postMountWrapper$3(element, props, isHydrating) {
           (element.value = "" + value);
       } else initialValue !== element.value && (element.value = initialValue);
     disableInputAttributeSyncing
-      ? ((type = getToStringValue(props.defaultValue)),
-        null != type && (element.defaultValue = "" + type))
+      ? null != props.defaultValue && (element.defaultValue = defaultValue)
       : (element.defaultValue = initialValue);
   }
   type = element.name;
   "" !== type && (element.name = "");
-  isHydrating || (element.checked = !!element._wrapperState.initialChecked);
+  defaultValue = null != props.checked ? props.checked : props.defaultChecked;
+  defaultValue =
+    "function" !== typeof defaultValue &&
+    "symbol" !== typeof defaultValue &&
+    !!defaultValue;
+  isHydrating || (element.checked = !!defaultValue);
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultChecked") &&
+    ? null != props.defaultChecked &&
       ((element.defaultChecked = !element.defaultChecked),
       (element.defaultChecked = !!props.defaultChecked))
-    : (element.defaultChecked = !!element._wrapperState.initialChecked);
+    : (element.defaultChecked = !!defaultValue);
   "" !== type && (element.name = type);
 }
 function setDefaultValue(node, type, value) {
-  if ("number" !== type || getActiveElement(node.ownerDocument) !== node)
-    null == value
-      ? (node.defaultValue = "" + node._wrapperState.initialValue)
-      : node.defaultValue !== "" + value && (node.defaultValue = "" + value);
+  ("number" === type && getActiveElement(node.ownerDocument) === node) ||
+    node.defaultValue === "" + value ||
+    (node.defaultValue = "" + value);
 }
 var isArrayImpl = Array.isArray;
 function updateOptions(node, multiple, propValue, setDefaultSelected) {
@@ -1093,7 +1082,18 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
-function initWrapperState(element, props) {
+function updateTextarea(element, props) {
+  var value = getToStringValue(props.value),
+    defaultValue = getToStringValue(props.defaultValue);
+  element.defaultValue = null != defaultValue ? "" + defaultValue : "";
+  null != value &&
+    ((value = "" + value),
+    value !== element.value && (element.value = value),
+    null == props.defaultValue &&
+      element.defaultValue !== value &&
+      (element.defaultValue = value));
+}
+function initTextarea(element, props) {
   var initialValue = props.value;
   if (null == initialValue) {
     initialValue = props.children;
@@ -1111,25 +1111,11 @@ function initWrapperState(element, props) {
   }
   props = getToStringValue(initialValue);
   element.defaultValue = props;
-  element._wrapperState = { initialValue: props };
-}
-function updateWrapper(element, props) {
-  var value = getToStringValue(props.value),
-    defaultValue = getToStringValue(props.defaultValue);
-  null != value &&
-    ((value = "" + value),
-    value !== element.value && (element.value = value),
-    null == props.defaultValue &&
-      element.defaultValue !== value &&
-      (element.defaultValue = value));
-  null != defaultValue && (element.defaultValue = "" + defaultValue);
-}
-function postMountWrapper(element) {
-  var textContent = element.textContent;
-  textContent === element._wrapperState.initialValue &&
-    "" !== textContent &&
-    null !== textContent &&
-    (element.value = textContent);
+  initialValue = element.textContent;
+  initialValue === props &&
+    "" !== initialValue &&
+    null !== initialValue &&
+    (element.value = initialValue);
 }
 function getChildNamespace(parentNamespace, type) {
   if (
@@ -1667,7 +1653,6 @@ function setInitialProperties(domElement, tag, props) {
     case "li":
       break;
     case "input":
-      initWrapperState$2(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey in props)
         if (props.hasOwnProperty(propKey)) {
@@ -1682,12 +1667,9 @@ function setInitialProperties(domElement, tag, props) {
                   domElement.setAttribute(propKey, propValue);
                 break;
               case "checked":
-                var node = domElement;
                 propValue =
-                  null != propValue
-                    ? propValue
-                    : node._wrapperState.initialChecked;
-                node.checked =
+                  null != propValue ? propValue : props.defaultChecked;
+                domElement.checked =
                   !!propValue &&
                   "function" !== typeof propValue &&
                   "symbol" !== propValue;
@@ -1704,21 +1686,20 @@ function setInitialProperties(domElement, tag, props) {
             }
         }
       track(domElement);
-      postMountWrapper$3(domElement, props, !1);
+      initInput(domElement, props, !1);
       return;
     case "select":
-      domElement._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", domElement);
-      for (propValue in props)
+      for (var propKey$18 in props)
         if (
-          props.hasOwnProperty(propValue) &&
-          ((propKey = props[propValue]), null != propKey)
+          props.hasOwnProperty(propKey$18) &&
+          ((propKey = props[propKey$18]), null != propKey)
         )
-          switch (propValue) {
+          switch (propKey$18) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propValue, propKey, props);
+              setProp(domElement, tag, propKey$18, propKey, props);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -1728,7 +1709,6 @@ function setInitialProperties(domElement, tag, props) {
           updateOptions(domElement, !!props.multiple, props.defaultValue, !0);
       return;
     case "textarea":
-      initWrapperState(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey$20 in props)
         if (
@@ -1747,7 +1727,7 @@ function setInitialProperties(domElement, tag, props) {
               setProp(domElement, tag, propKey$20, propKey, props);
           }
       track(domElement);
-      postMountWrapper(domElement);
+      initTextarea(domElement, props);
       return;
     case "option":
       for (var propKey$22 in props)
@@ -1834,10 +1814,10 @@ function setInitialProperties(domElement, tag, props) {
         return;
       }
   }
-  for (node in props)
-    props.hasOwnProperty(node) &&
-      ((propKey = props[node]),
-      null != propKey && setProp(domElement, tag, node, propKey, props));
+  for (propValue in props)
+    props.hasOwnProperty(propValue) &&
+      ((propKey = props[propValue]),
+      null != propKey && setProp(domElement, tag, propValue, propKey, props));
 }
 function updateProperties(
   domElement,
@@ -1866,15 +1846,11 @@ function updateProperties(
           propValue = updatePayload[lastProps + 1];
         switch (propKey) {
           case "checked":
-            propKey = domElement;
-            propValue =
-              null != propValue
-                ? propValue
-                : propKey._wrapperState.initialChecked;
-            propKey.checked =
-              !!propValue &&
-              "function" !== typeof propValue &&
-              "symbol" !== propValue;
+            propKey = null != propValue ? propValue : nextProps.defaultChecked;
+            domElement.checked =
+              !!propKey &&
+              "function" !== typeof propKey &&
+              "symbol" !== propKey;
             break;
           case "value":
             break;
@@ -1887,22 +1863,20 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
         }
       }
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     case "select":
-      for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
-        switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
-        ) {
+      for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
+        propValue = updatePayload[propKey];
+        var propValue$32 = updatePayload[propKey + 1];
+        switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propValue, propValue$32, nextProps);
         }
-      updatePayload = domElement._wrapperState.wasMultiple;
-      domElement._wrapperState.wasMultiple = !!nextProps.multiple;
+      }
+      updatePayload = !!lastProps.multiple;
       tag = nextProps.value;
       null != tag
         ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
@@ -1924,37 +1898,37 @@ function updateProperties(
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "value":
             break;
           case "children":
             break;
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(91));
+            if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     case "option":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "selected":
             domElement.selected =
-              propKey &&
-              "function" !== typeof propKey &&
-              "symbol" !== typeof propKey;
+              propValue &&
+              "function" !== typeof propValue &&
+              "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     case "img":
@@ -1974,16 +1948,17 @@ function updateProperties(
     case "menuitem":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "children":
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(137, tag));
+            if (null != propValue)
+              throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     default:
@@ -2016,7 +1991,7 @@ function restoreStateOfTarget(target) {
     var props = getFiberCurrentPropsFromNode(target);
     a: switch (((target = internalInstance.stateNode), internalInstance.type)) {
       case "input":
-        updateWrapper$1(target, props);
+        updateInput(target, props);
         internalInstance = props.name;
         if ("radio" === props.type && null != internalInstance) {
           for (props = target; props.parentNode; ) props = props.parentNode;
@@ -2035,13 +2010,13 @@ function restoreStateOfTarget(target) {
               var otherProps = getFiberCurrentPropsFromNode(otherNode);
               if (!otherProps) throw Error(formatProdErrorMessage(90));
               updateValueIfChanged(otherNode);
-              updateWrapper$1(otherNode, otherProps);
+              updateInput(otherNode, otherProps);
             }
           }
         }
         break a;
       case "textarea":
-        updateWrapper(target, props);
+        updateTextarea(target, props);
         break a;
       case "select":
         (internalInstance = props.value),
@@ -2349,20 +2324,17 @@ function prepareToHydrateHostInstance(fiber) {
       listenToNonDelegatedEvent("toggle", instance);
       break;
     case "input":
-      initWrapperState$2(instance, props);
       listenToNonDelegatedEvent("invalid", instance);
       track(instance);
-      postMountWrapper$3(instance, props, !0);
+      initInput(instance, props, !0);
       break;
     case "select":
-      instance._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", instance);
       break;
     case "textarea":
-      initWrapperState(instance, props),
-        listenToNonDelegatedEvent("invalid", instance),
+      listenToNonDelegatedEvent("invalid", instance),
         track(instance),
-        postMountWrapper(instance);
+        initTextarea(instance, props);
   }
   var updatePayload = null;
   type = props.children;
@@ -13446,19 +13418,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$337;
+  var JSCompiler_inline_result$jscomp$335;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1628 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1628) {
-      var element$jscomp$inline_1629 = document.createElement("div");
-      element$jscomp$inline_1629.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1628 =
-        "function" === typeof element$jscomp$inline_1629.oninput;
+    var isSupported$jscomp$inline_1624 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1624) {
+      var element$jscomp$inline_1625 = document.createElement("div");
+      element$jscomp$inline_1625.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1624 =
+        "function" === typeof element$jscomp$inline_1625.oninput;
     }
-    JSCompiler_inline_result$jscomp$337 = isSupported$jscomp$inline_1628;
-  } else JSCompiler_inline_result$jscomp$337 = !1;
+    JSCompiler_inline_result$jscomp$335 = isSupported$jscomp$inline_1624;
+  } else JSCompiler_inline_result$jscomp$335 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$337 &&
+    JSCompiler_inline_result$jscomp$335 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13767,20 +13739,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1669 = 0;
-  i$jscomp$inline_1669 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1669++
+  var i$jscomp$inline_1665 = 0;
+  i$jscomp$inline_1665 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1665++
 ) {
-  var eventName$jscomp$inline_1670 =
-      simpleEventPluginEvents[i$jscomp$inline_1669],
-    domEventName$jscomp$inline_1671 =
-      eventName$jscomp$inline_1670.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1672 =
-      eventName$jscomp$inline_1670[0].toUpperCase() +
-      eventName$jscomp$inline_1670.slice(1);
+  var eventName$jscomp$inline_1666 =
+      simpleEventPluginEvents[i$jscomp$inline_1665],
+    domEventName$jscomp$inline_1667 =
+      eventName$jscomp$inline_1666.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1668 =
+      eventName$jscomp$inline_1666[0].toUpperCase() +
+      eventName$jscomp$inline_1666.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1671,
-    "on" + capitalizedEvent$jscomp$inline_1672
+    domEventName$jscomp$inline_1667,
+    "on" + capitalizedEvent$jscomp$inline_1668
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14337,11 +14309,11 @@ function dispatchEventForPluginEventSystem(
         }
         handleEventFunc && handleEventFunc(domEventName, reactName, targetInst);
         "focusout" === domEventName &&
-          (handleEventFunc = reactName._wrapperState) &&
-          handleEventFunc.controlled &&
+          targetInst &&
           "number" === reactName.type &&
           (disableInputAttributeSyncing ||
-            setDefaultValue(reactName, "number", reactName.value));
+            (null != targetInst.memoizedProps.value &&
+              setDefaultValue(reactName, "number", reactName.value)));
       }
       handleEventFunc = targetInst ? getNodeFromInstance(targetInst) : window;
       switch (domEventName) {
@@ -14793,17 +14765,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1783 = {
+var devToolsConfig$jscomp$inline_1779 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-aefca35b",
+  version: "18.3.0-www-classic-6b173260",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2225 = {
-  bundleType: devToolsConfig$jscomp$inline_1783.bundleType,
-  version: devToolsConfig$jscomp$inline_1783.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1783.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1783.rendererConfig,
+var internals$jscomp$inline_2221 = {
+  bundleType: devToolsConfig$jscomp$inline_1779.bundleType,
+  version: devToolsConfig$jscomp$inline_1779.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1779.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1779.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -14819,26 +14791,26 @@ var internals$jscomp$inline_2225 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1783.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1779.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-aefca35b"
+  reconcilerVersion: "18.3.0-www-classic-6b173260"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2226 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2222 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2226.isDisabled &&
-    hook$jscomp$inline_2226.supportsFiber
+    !hook$jscomp$inline_2222.isDisabled &&
+    hook$jscomp$inline_2222.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2226.inject(
-        internals$jscomp$inline_2225
+      (rendererID = hook$jscomp$inline_2222.inject(
+        internals$jscomp$inline_2221
       )),
-        (injectedHook = hook$jscomp$inline_2226);
+        (injectedHook = hook$jscomp$inline_2222);
     } catch (err) {}
 }
 var tagToRoleMappings = {
@@ -16828,4 +16800,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-aefca35b";
+exports.version = "18.3.0-www-classic-6b173260";
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
index f05e3dd5ed7d1..251575319fefc 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
@@ -963,50 +963,22 @@ function getActiveElement(doc) {
     return doc.body;
   }
 }
-function initWrapperState$2(element, props) {
-  var defaultValue = null == props.defaultValue ? "" : props.defaultValue,
-    initialChecked =
-      null != props.checked ? props.checked : props.defaultChecked;
-  defaultValue = getToStringValue(
-    null != props.value ? props.value : defaultValue
-  );
-  element._wrapperState = {
-    initialChecked:
-      "function" !== typeof initialChecked &&
-      "symbol" !== typeof initialChecked &&
-      !!initialChecked,
-    initialValue: defaultValue,
-    controlled:
-      "checkbox" === props.type || "radio" === props.type
-        ? null != props.checked
-        : null != props.value
-  };
-}
-function updateWrapper$1(element, props) {
-  var checked = props.checked;
-  null != checked && (element.checked = checked);
-  checked = getToStringValue(props.value);
-  var type = props.type;
-  if (null != checked)
-    if ("number" === type) {
-      if ((0 === checked && "" === element.value) || element.value != checked)
-        element.value = "" + checked;
-    } else element.value !== "" + checked && (element.value = "" + checked);
-  else if ("submit" === type || "reset" === type) {
-    element.removeAttribute("value");
-    return;
-  }
+function updateInput(element, props) {
+  var value = getToStringValue(props.value),
+    type = props.type;
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
-    : props.hasOwnProperty("value")
-    ? setDefaultValue(element, props.type, checked)
-    : props.hasOwnProperty("defaultValue") &&
-      setDefaultValue(
-        element,
-        props.type,
-        getToStringValue(props.defaultValue)
-      );
+    ? null != props.defaultValue
+      ? setDefaultValue(
+          element,
+          props.type,
+          getToStringValue(props.defaultValue)
+        )
+      : element.removeAttribute("value")
+    : null != props.value
+    ? setDefaultValue(element, props.type, value)
+    : null != props.defaultValue
+    ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue))
+    : element.removeAttribute("value");
   disableInputAttributeSyncing
     ? null == props.defaultChecked
       ? element.removeAttribute("checked")
@@ -1014,16 +986,30 @@ function updateWrapper$1(element, props) {
     : null == props.checked &&
       null != props.defaultChecked &&
       (element.defaultChecked = !!props.defaultChecked);
+  props = props.checked;
+  null != props && (element.checked = props);
+  if (null != value)
+    if ("number" === type) {
+      if ((0 === value && "" === element.value) || element.value != value)
+        element.value = "" + value;
+    } else element.value !== "" + value && (element.value = "" + value);
+  else
+    ("submit" !== type && "reset" !== type) || element.removeAttribute("value");
 }
-function postMountWrapper$3(element, props, isHydrating) {
-  if (props.hasOwnProperty("value") || props.hasOwnProperty("defaultValue")) {
+function initInput(element, props, isHydrating) {
+  if (null != props.value || null != props.defaultValue) {
     var type = props.type;
     if (
       (type = "submit" === type || "reset" === type) &&
       (void 0 === props.value || null === props.value)
     )
       return;
-    var initialValue = "" + element._wrapperState.initialValue;
+    var defaultValue =
+        null != props.defaultValue
+          ? "" + getToStringValue(props.defaultValue)
+          : "",
+      initialValue =
+        null != props.value ? "" + getToStringValue(props.value) : defaultValue;
     if (!isHydrating)
       if (disableInputAttributeSyncing) {
         var value = getToStringValue(props.value);
@@ -1032,25 +1018,28 @@ function postMountWrapper$3(element, props, isHydrating) {
           (element.value = "" + value);
       } else initialValue !== element.value && (element.value = initialValue);
     disableInputAttributeSyncing
-      ? ((type = getToStringValue(props.defaultValue)),
-        null != type && (element.defaultValue = "" + type))
+      ? null != props.defaultValue && (element.defaultValue = defaultValue)
       : (element.defaultValue = initialValue);
   }
   type = element.name;
   "" !== type && (element.name = "");
-  isHydrating || (element.checked = !!element._wrapperState.initialChecked);
+  defaultValue = null != props.checked ? props.checked : props.defaultChecked;
+  defaultValue =
+    "function" !== typeof defaultValue &&
+    "symbol" !== typeof defaultValue &&
+    !!defaultValue;
+  isHydrating || (element.checked = !!defaultValue);
   disableInputAttributeSyncing
-    ? props.hasOwnProperty("defaultChecked") &&
+    ? null != props.defaultChecked &&
       ((element.defaultChecked = !element.defaultChecked),
       (element.defaultChecked = !!props.defaultChecked))
-    : (element.defaultChecked = !!element._wrapperState.initialChecked);
+    : (element.defaultChecked = !!defaultValue);
   "" !== type && (element.name = type);
 }
 function setDefaultValue(node, type, value) {
-  if ("number" !== type || getActiveElement(node.ownerDocument) !== node)
-    null == value
-      ? (node.defaultValue = "" + node._wrapperState.initialValue)
-      : node.defaultValue !== "" + value && (node.defaultValue = "" + value);
+  ("number" === type && getActiveElement(node.ownerDocument) === node) ||
+    node.defaultValue === "" + value ||
+    (node.defaultValue = "" + value);
 }
 var isArrayImpl = Array.isArray;
 function updateOptions(node, multiple, propValue, setDefaultSelected) {
@@ -1077,33 +1066,30 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) {
     null !== multiple && (multiple.selected = !0);
   }
 }
-function initWrapperState(element, props) {
-  var initialValue = props.value;
-  null == initialValue &&
-    ((props = props.defaultValue),
-    null == props && (props = ""),
-    (initialValue = props));
-  props = getToStringValue(initialValue);
-  element.defaultValue = props;
-  element._wrapperState = { initialValue: props };
-}
-function updateWrapper(element, props) {
+function updateTextarea(element, props) {
   var value = getToStringValue(props.value),
     defaultValue = getToStringValue(props.defaultValue);
+  element.defaultValue = null != defaultValue ? "" + defaultValue : "";
   null != value &&
     ((value = "" + value),
     value !== element.value && (element.value = value),
     null == props.defaultValue &&
       element.defaultValue !== value &&
       (element.defaultValue = value));
-  null != defaultValue && (element.defaultValue = "" + defaultValue);
 }
-function postMountWrapper(element) {
-  var textContent = element.textContent;
-  textContent === element._wrapperState.initialValue &&
-    "" !== textContent &&
-    null !== textContent &&
-    (element.value = textContent);
+function initTextarea(element, props) {
+  var initialValue = props.value;
+  null == initialValue &&
+    ((props = props.defaultValue),
+    null == props && (props = ""),
+    (initialValue = props));
+  props = getToStringValue(initialValue);
+  element.defaultValue = props;
+  initialValue = element.textContent;
+  initialValue === props &&
+    "" !== initialValue &&
+    null !== initialValue &&
+    (element.value = initialValue);
 }
 function getChildNamespace(parentNamespace, type) {
   if (
@@ -1312,7 +1298,7 @@ function restoreStateOfTarget(target) {
     var props = getFiberCurrentPropsFromNode(target);
     a: switch (((target = internalInstance.stateNode), internalInstance.type)) {
       case "input":
-        updateWrapper$1(target, props);
+        updateInput(target, props);
         internalInstance = props.name;
         if ("radio" === props.type && null != internalInstance) {
           for (props = target; props.parentNode; ) props = props.parentNode;
@@ -1331,13 +1317,13 @@ function restoreStateOfTarget(target) {
               var otherProps = getFiberCurrentPropsFromNode(otherNode);
               if (!otherProps) throw Error(formatProdErrorMessage(90));
               updateValueIfChanged(otherNode);
-              updateWrapper$1(otherNode, otherProps);
+              updateInput(otherNode, otherProps);
             }
           }
         }
         break a;
       case "textarea":
-        updateWrapper(target, props);
+        updateTextarea(target, props);
         break a;
       case "select":
         (internalInstance = props.value),
@@ -1693,20 +1679,17 @@ function prepareToHydrateHostInstance(fiber) {
       listenToNonDelegatedEvent("toggle", instance);
       break;
     case "input":
-      initWrapperState$2(instance, props);
       listenToNonDelegatedEvent("invalid", instance);
       track(instance);
-      postMountWrapper$3(instance, props, !0);
+      initInput(instance, props, !0);
       break;
     case "select":
-      instance._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", instance);
       break;
     case "textarea":
-      initWrapperState(instance, props),
-        listenToNonDelegatedEvent("invalid", instance),
+      listenToNonDelegatedEvent("invalid", instance),
         track(instance),
-        postMountWrapper(instance);
+        initTextarea(instance, props);
   }
   var updatePayload = null;
   type = props.children;
@@ -13135,19 +13118,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$333;
+  var JSCompiler_inline_result$jscomp$331;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1588 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1588) {
-      var element$jscomp$inline_1589 = document.createElement("div");
-      element$jscomp$inline_1589.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1588 =
-        "function" === typeof element$jscomp$inline_1589.oninput;
+    var isSupported$jscomp$inline_1583 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1583) {
+      var element$jscomp$inline_1584 = document.createElement("div");
+      element$jscomp$inline_1584.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1583 =
+        "function" === typeof element$jscomp$inline_1584.oninput;
     }
-    JSCompiler_inline_result$jscomp$333 = isSupported$jscomp$inline_1588;
-  } else JSCompiler_inline_result$jscomp$333 = !1;
+    JSCompiler_inline_result$jscomp$331 = isSupported$jscomp$inline_1583;
+  } else JSCompiler_inline_result$jscomp$331 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$333 &&
+    JSCompiler_inline_result$jscomp$331 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13456,20 +13439,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1629 = 0;
-  i$jscomp$inline_1629 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1629++
+  var i$jscomp$inline_1624 = 0;
+  i$jscomp$inline_1624 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1624++
 ) {
-  var eventName$jscomp$inline_1630 =
-      simpleEventPluginEvents[i$jscomp$inline_1629],
-    domEventName$jscomp$inline_1631 =
-      eventName$jscomp$inline_1630.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1632 =
-      eventName$jscomp$inline_1630[0].toUpperCase() +
-      eventName$jscomp$inline_1630.slice(1);
+  var eventName$jscomp$inline_1625 =
+      simpleEventPluginEvents[i$jscomp$inline_1624],
+    domEventName$jscomp$inline_1626 =
+      eventName$jscomp$inline_1625.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1627 =
+      eventName$jscomp$inline_1625[0].toUpperCase() +
+      eventName$jscomp$inline_1625.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1631,
-    "on" + capitalizedEvent$jscomp$inline_1632
+    domEventName$jscomp$inline_1626,
+    "on" + capitalizedEvent$jscomp$inline_1627
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14026,11 +14009,11 @@ function dispatchEventForPluginEventSystem(
         }
         handleEventFunc && handleEventFunc(domEventName, reactName, targetInst);
         "focusout" === domEventName &&
-          (handleEventFunc = reactName._wrapperState) &&
-          handleEventFunc.controlled &&
+          targetInst &&
           "number" === reactName.type &&
           (disableInputAttributeSyncing ||
-            setDefaultValue(reactName, "number", reactName.value));
+            (null != targetInst.memoizedProps.value &&
+              setDefaultValue(reactName, "number", reactName.value)));
       }
       handleEventFunc = targetInst ? getNodeFromInstance(targetInst) : window;
       switch (domEventName) {
@@ -14637,7 +14620,6 @@ function setInitialProperties(domElement, tag, props) {
     case "li":
       break;
     case "input":
-      initWrapperState$2(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey in props)
         if (props.hasOwnProperty(propKey)) {
@@ -14652,12 +14634,9 @@ function setInitialProperties(domElement, tag, props) {
                   domElement.setAttribute(propKey, propValue);
                 break;
               case "checked":
-                var node = domElement;
                 propValue =
-                  null != propValue
-                    ? propValue
-                    : node._wrapperState.initialChecked;
-                node.checked =
+                  null != propValue ? propValue : props.defaultChecked;
+                domElement.checked =
                   !!propValue &&
                   "function" !== typeof propValue &&
                   "symbol" !== propValue;
@@ -14674,21 +14653,20 @@ function setInitialProperties(domElement, tag, props) {
             }
         }
       track(domElement);
-      postMountWrapper$3(domElement, props, !1);
+      initInput(domElement, props, !1);
       return;
     case "select":
-      domElement._wrapperState = { wasMultiple: !!props.multiple };
       listenToNonDelegatedEvent("invalid", domElement);
-      for (propValue in props)
+      for (var propKey$201 in props)
         if (
-          props.hasOwnProperty(propValue) &&
-          ((propKey = props[propValue]), null != propKey)
+          props.hasOwnProperty(propKey$201) &&
+          ((propKey = props[propKey$201]), null != propKey)
         )
-          switch (propValue) {
+          switch (propKey$201) {
             case "value":
               break;
             default:
-              setProp(domElement, tag, propValue, propKey, props);
+              setProp(domElement, tag, propKey$201, propKey, props);
           }
       domElement.multiple = !!props.multiple;
       tag = props.value;
@@ -14698,7 +14676,6 @@ function setInitialProperties(domElement, tag, props) {
           updateOptions(domElement, !!props.multiple, props.defaultValue, !0);
       return;
     case "textarea":
-      initWrapperState(domElement, props);
       listenToNonDelegatedEvent("invalid", domElement);
       for (var propKey$203 in props)
         if (
@@ -14717,7 +14694,7 @@ function setInitialProperties(domElement, tag, props) {
               setProp(domElement, tag, propKey$203, propKey, props);
           }
       track(domElement);
-      postMountWrapper(domElement);
+      initTextarea(domElement, props);
       return;
     case "option":
       for (var propKey$205 in props)
@@ -14804,10 +14781,10 @@ function setInitialProperties(domElement, tag, props) {
         return;
       }
   }
-  for (node in props)
-    props.hasOwnProperty(node) &&
-      ((propKey = props[node]),
-      null != propKey && setProp(domElement, tag, node, propKey, props));
+  for (propValue in props)
+    props.hasOwnProperty(propValue) &&
+      ((propKey = props[propValue]),
+      null != propKey && setProp(domElement, tag, propValue, propKey, props));
 }
 function updateProperties(
   domElement,
@@ -14836,15 +14813,11 @@ function updateProperties(
           propValue = updatePayload[lastProps + 1];
         switch (propKey) {
           case "checked":
-            propKey = domElement;
-            propValue =
-              null != propValue
-                ? propValue
-                : propKey._wrapperState.initialChecked;
-            propKey.checked =
-              !!propValue &&
-              "function" !== typeof propValue &&
-              "symbol" !== propValue;
+            propKey = null != propValue ? propValue : nextProps.defaultChecked;
+            domElement.checked =
+              !!propKey &&
+              "function" !== typeof propKey &&
+              "symbol" !== propKey;
             break;
           case "value":
             break;
@@ -14857,22 +14830,20 @@ function updateProperties(
             setProp(domElement, tag, propKey, propValue, nextProps);
         }
       }
-      updateWrapper$1(domElement, nextProps);
+      updateInput(domElement, nextProps);
       return;
     case "select":
-      for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
-        switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
-        ) {
+      for (propKey = 0; propKey < updatePayload.length; propKey += 2) {
+        propValue = updatePayload[propKey];
+        var propValue$215 = updatePayload[propKey + 1];
+        switch (propValue) {
           case "value":
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propValue, propValue$215, nextProps);
         }
-      updatePayload = domElement._wrapperState.wasMultiple;
-      domElement._wrapperState.wasMultiple = !!nextProps.multiple;
+      }
+      updatePayload = !!lastProps.multiple;
       tag = nextProps.value;
       null != tag
         ? updateOptions(domElement, !!nextProps.multiple, tag, !1)
@@ -14894,37 +14865,37 @@ function updateProperties(
     case "textarea":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "value":
             break;
           case "children":
             break;
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(91));
+            if (null != propValue) throw Error(formatProdErrorMessage(91));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
-      updateWrapper(domElement, nextProps);
+      updateTextarea(domElement, nextProps);
       return;
     case "option":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "selected":
             domElement.selected =
-              propKey &&
-              "function" !== typeof propKey &&
-              "symbol" !== typeof propKey;
+              propValue &&
+              "function" !== typeof propValue &&
+              "symbol" !== typeof propValue;
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     case "img":
@@ -14944,16 +14915,17 @@ function updateProperties(
     case "menuitem":
       for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2)
         switch (
-          ((propValue = updatePayload[lastProps]),
-          (propKey = updatePayload[lastProps + 1]),
-          propValue)
+          ((propKey = updatePayload[lastProps]),
+          (propValue = updatePayload[lastProps + 1]),
+          propKey)
         ) {
           case "children":
           case "dangerouslySetInnerHTML":
-            if (null != propKey) throw Error(formatProdErrorMessage(137, tag));
+            if (null != propValue)
+              throw Error(formatProdErrorMessage(137, tag));
             break;
           default:
-            setProp(domElement, tag, propValue, propKey, nextProps);
+            setProp(domElement, tag, propKey, propValue, nextProps);
         }
       return;
     default:
@@ -15986,17 +15958,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1813 = {
+var devToolsConfig$jscomp$inline_1809 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-81d6a6e4",
+  version: "18.3.0-www-modern-a9e6dcdb",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2192 = {
-  bundleType: devToolsConfig$jscomp$inline_1813.bundleType,
-  version: devToolsConfig$jscomp$inline_1813.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1813.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1813.rendererConfig,
+var internals$jscomp$inline_2188 = {
+  bundleType: devToolsConfig$jscomp$inline_1809.bundleType,
+  version: devToolsConfig$jscomp$inline_1809.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1809.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1809.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16013,26 +15985,26 @@ var internals$jscomp$inline_2192 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1813.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1809.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-81d6a6e4"
+  reconcilerVersion: "18.3.0-www-modern-a9e6dcdb"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2193 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2189 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2193.isDisabled &&
-    hook$jscomp$inline_2193.supportsFiber
+    !hook$jscomp$inline_2189.isDisabled &&
+    hook$jscomp$inline_2189.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2193.inject(
-        internals$jscomp$inline_2192
+      (rendererID = hook$jscomp$inline_2189.inject(
+        internals$jscomp$inline_2188
       )),
-        (injectedHook = hook$jscomp$inline_2193);
+        (injectedHook = hook$jscomp$inline_2189);
     } catch (err) {}
 }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
@@ -16340,4 +16312,4 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-81d6a6e4";
+exports.version = "18.3.0-www-modern-a9e6dcdb";
diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
index 755ce4c4e09e0..73c7d17fe0fe2 100644
--- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js
+++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
@@ -24498,7 +24498,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-81d6a6e4";
+var ReactVersion = "18.3.0-www-modern-a9e6dcdb";
 
 // Might add PROFILE later.