Repository: react
Issue: Bug: radio and checkbox controlled checked property is not updated when browser restores form state
Labels: Type: Bug,Component: DOM

<!--
  Please provide a clear and concise description of what the bug is. Include
  screenshots if needed. Please test using the latest version of the relevant
  React packages to make sure your issue has not already been fixed.
-->

React version: 17.0.2

## Steps To Reproduce

1. Add a textbox, two radio buttons (or checkboxes) controlling the `checked` property with state, and a `button[type=submit]`.
2. Check off the second item ("Bananas").
3. Enter text into the "Your name" textbox.
4. Right click on the tab and duplicate it. Alternative: close + re-open the tab, or navigate away to a different page and go back.

```javascript
function App() {
  const [fruit, updateFruit] = useState("apple");
  const [name, updateName] = useState("");

  function onFruitChange(e) {
    const newFruit = e.target.value;
    updateFruit(newFruit);
  }

  function onNameChange(e) {
    const newName = e.target.value;
    updateName(newName);
  }

  return (
    <div>
      <label>
        <input type="radio" name="fruit" value="apple" checked={fruit === "apple"} onChange={onFruitChange} />
        Apples
      </label>
      <label>
        <input type="radio" name="fruit" value="banana" checked={fruit === "banana"} onChange={onFruitChange} />
        Bananas
      </label>
      <div>
        <input type="text" name="name" placeholder="Your name" value={name} onChange={onNameChange} />
      </div>
      <div>
        Preferred fruit:
        {fruit === "apple" ? "Apples" : "Bananas"}
      </div>
      <br />
      <div>Your name: {name}</div>
      <hr />
      <br />
      <div>
        <button type="submit">Save</button>
      </div>
    </div>
  );
}
```

https://user-images.githubusercontent.com/613788/124511769-e9187000-dda4-11eb-99f9-e1334d4057c3.mp4

<!--
  Your bug will get fixed much faster if we can run your code and it doesn't
  have dependencies other than React. Issues without reproduction steps or
  code examples may be immediately closed as not actionable.
-->

Link to code example:

https://codesandbox.io/s/hungry-glitter-ut79s

**IMPORTANT**: This CodeSandbox won't work because the browser will be too early when restoring the form state (transpiling is too slow). I suggest taking this script to a local server to confirm that the browser was able to properly restore form state when loading the page.

<!--
  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
  repository on GitHub, or provide a minimal code example that reproduces the
  problem. You may provide a screenshot of the application if you think it is
  relevant to your bug report. Here are some tips for providing a minimal
  example: https://stackoverflow.com/help/mcve.
-->

## The current behavior

The `banana` radio is checked and `Preferred fruit: Apples` is shown. The react state has `fruit === 'apple'` but the browser has the opposite state.

I've confirmed that this behavior happens with `input[type=checkbox]` too.

## The expected behavior

To match the behavior of other controlled inputs like the textbox, `apple` radio should be checked and `Preferred fruit: Apples` should be shown. The input `checked` property isn't being synced. 

## Related issues

- https://github.com/facebook/react/issues/10657
  - I'm not using SSR though.
- https://github.com/facebook/react/issues/18502
  - Maybe related, but I'm not using `defaultChecked`.
- https://github.com/vercel/next.js/issues/6128
  - Similar issues.