Cannot override PaginationItem component slots with a button component due to ValidateDOMNesting error.

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
Codesandbox
Steps:

1. Load sandbox
2. See error in console

Current behavior 😯

The slots inside PaginationItem provide a method for adding your own custom component for previous/next buttons etc. Currently you can do this, but if your custom component is a button, you get a validateDOMNesting error as the slot is for the child of a button component.

Expected behavior 🤔

I'd have expected that when adding your own custom component for the previous/next slots, it would replace the entire button component instead of just being a child of button.

Context 🔦

I get that this functionality may have been created to replace the icons for the navigational buttons. However, it makes much more sense to allow the user to add in their own custom button components for these slots.

Your environment 🌎

  System:
    OS: macOS 12.4
  Binaries:
    Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.3/bin/yarn
    npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Edge: 114.0.1823.37
    Firefox: 109.0.1
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.9.3 => 11.10.6
    @emotion/styled: ^11.9.3 => 11.10.6
    @mui/base:  5.0.0-alpha.119
    @mui/core-downloads-tracker:  5.11.11
    @mui/icons-material: ^5.8.4 => 5.11.11
    @mui/lab:  5.0.0-alpha.134
    @mui/material: ^5.9.2 => 5.11.11
    @mui/private-theming:  5.11.11
    @mui/styled-engine:  5.11.11
    @mui/styles: ^5.9.2 => 5.11.11
    @mui/system:  5.11.11
    @mui/types:  7.2.3
    @mui/utils:  5.11.11
    @types/react: ^18.0.28 => 18.0.28
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.3.4 => 4.9.5