Repository: material-ui
Issue: [joy-ui][Input][FormControl][Select] Example component use from docs cause console error
Labels: on hold,component: select,component: text field,package: joy-ui,component: FormControl

### Steps to reproduce

Link to live example: (required)
https://github.com/zprobinson/muijoy-nested-formcontrol

Steps:
1. Clone repository
2. `npm install`
3. `npm run dev`
4. Open to `localhost:5173` and look at console

![image](https://github.com/mui/material-ui/assets/59841145/447f02f4-a2fb-4e36-9f48-dafa74cef48e)



### Current behavior

I am using an example in the `Mui Joy` documentation for the `Input` component and receiving an error in the console.

I am using [this](https://mui.com/joy-ui/react-input/#decorators) example.

The `FormControl` component apparently does not allow for nested controls as children. This is mutually exclusive with the documentation (and also my expectation) which demonstrates the ability to use decorators to create complex inputs such as an input/select combination for currency denomination.

### Expected behavior

I expect to be able to copy examples from documentation and not receive errors at run time.
The example uses a `Stack` instead of a `FormControl` as the parent element. This is likely due to the error I have above. But this is kind of a tricky and unintentionally deceptive nuance. I expect to use complex form controls I design/compose inside of a `form` element. Inside of that form element, for all of my form controls I expect to use the `FormControl` component for consistency of spacing/layout/style.

I expect the `form` suite of components (including Form Control) to be able to support decorated children/input which allow me to capture more complex form entry needs.

### Context

I have a quantity and a quantity unit of measure field in the form of my application.

Instead of 2 separate fields, the documentation implies a great solution of a combined input/select. This keeps the user experience great because the two pieces of data are tightly correlated, they should be filled out/displayed in the same location.

### Your environment

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  Browser:
    Firefox 124.0 (64-bit)
    Edge (current-ish version, a coworker brought up the issue to me initially) (64-bit)

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.12 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: Not Found
    Edge: Chromium (122.0.2365.92)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.14
    @mui/joy: ^5.0.0-beta.32 => 5.0.0-beta.32
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.14
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @types/react: ^18.2.66 => 18.2.67
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.4.3
```
</details>


**Search keywords**: joy joyui joy-ui input form control select nest decorator documentation example