SpeedDial cannot have children other than SpeedDialAction

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/admiring-moore-8ftlq3?file=/src/App.tsx

Steps:

1. Hover over SpeedDial and see no menu is shown
2. Comment out the two spans inside SpeedDial
3. Things work as expected

Current behavior 😯

Cannot nest anything inside SpeedDial as it breaks SpeedDialActions

Expected behavior 🤔

You should be able to nest other things inside SpeedDial around the SpeedDialActions.

Context 🔦

The plan was to customise the SpeedDial by putting the SpeedDialActions inside a component, so the user can rearrange the order.

Your environment 🌎

Browser Chrome

System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 19.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.15.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.58)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6
    @emotion/styled: ^11.10.6 => 11.10.6
    @mui/base:  5.0.0-alpha.126
    @mui/core-downloads-tracker:  5.12.1
    @mui/icons-material: ^5.11.16 => 5.11.16
    @mui/material: ^5.12.1 => 5.12.1
    @mui/private-theming:  5.12.0
    @mui/styled-engine:  5.12.0
    @mui/system:  5.12.1
    @mui/types:  7.2.4
    @mui/utils:  5.12.0
    @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.9.5 => 4.9.5

Start with the linked CodeSandbox and inspect the SpeedDial and SpeedDialAction entry points involved when spans are nested around the actions. Reproduce the failure with the extra children present, then verify that other children can be nested while the SpeedDialActions menu still appears and operates correctly.