Material-ui-pickers: Invalid prop `children` supplied to `LocalizationProvider`

[BGehrels]

Environment

| Tech | Version |
| -------------------- | ------- |
| @material-ui/pickers | 3.2.7 |
| material-ui | 4.4.3 |
| React | 16.10.1 |
| Browser | Firefox 69.0.3|
| Peer library | moment |

Steps to reproduce

1. Render

      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
        <h1>Component</h1>
        <p>More than one sub component</p>
      </MuiPickersUtilsProvider >

Expected behavior

No warning, renders both sub components

Actual behavior

Renders both sub components, but browser console says:

Warning: Failed prop type: Invalid prop `children` supplied to `MuiPickersUtilsProvider`.
in MuiPickersUtilsProvider (created by MyParentComponent)
in ...

Workaround

Wrap the sub components in a React.Fragment

      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
        <>
          <h1>Component</h1>
          <p>More than one sub component</p>
        </>
      </MuiPickersUtilsProvider >

[Juanperezc]

same issue

[joaoaguiam]

Same issue for me, my workaround was to wrap each picker with the MuiPickersUtilsProvider.

[oliviertassinari]

Thanks for the report, the prop-type is wrong:

https://github.com/mui-org/material-ui-pickers/blob/1cc44e5e134b8c5567bcf1ab63a1416b83a00072/lib/src/LocalizationProvider.tsx#L34

It should be using children: PropTypes.node.

[oliviertassinari]

Note that this provider might go away in v4.

[kerkness]

Note that this provider might go away in v4.

Still seems to be a thing in v4. Using the alpha and It's very nice.

[oliviertassinari]

The fate of MuiPickersUtilsProvider is unclear in v4. We have been discussing a couple of possible options. I wonder how we could better support these cases:

1. How can we leverage the date utils for more components: Big calendar/Scheduler, Data Grid, Gantt Chart, Chart. In sum, any component that might need to manipulate dates or to format them.
2. Should we force developers to configure something to use any component that depends on date manipulation? So far, we have made the tradeoff to not require it with the core components.
3. Should we use x providers per concerns or bundle everything into the theme provider? In the future, we might need to include some sort of capability to format the number per locale. I suspect charts and data grids will need this feature. We already have a track record for using two context providers: Theme Provider and StylesProvider.

What's our best move?

cc @mui-org/core

[vdh]

@oliviertassinari Isn't the discussion about the future of the provider out of scope for this particular issue? This is just about fixing prop type validation.