[DataGrid] Add use client directive to the Grid packages

[MBilalShafi]

Closes #11699

For the simple use cases when no function (or something non-serializable) is used in the App Router code using Data Grid, this PR will help to not force the users to use use client directive on their side.

[mui-bot]

Deploy preview: https://deploy-preview-11803--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 6e64f73

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[cherniavskii]

Do we need to add "use client" to the exported subcomponents, like GridToolbar?

[MBilalShafi]

Do we need to add "use client" to the exported subcomponents, like GridToolbar?

Yes, we could, won't it apply to every other slot component too though? As a reference, I tried to use GridCell and GridColumnMenu slots (import and pass in slots) both of which in addition to all the React.createContext instances also required a dedicated use client directive.

I'd propose adding it to the entry point index.js instead, which will resolve it for all the components, utils, etc. exported from the Grid. We could always remove it (or move to specific files) whenever some server-side rendering need arises as mentioned in #9833 (comment)

Wdyt?