[joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color

[rsslldnphy]

Steps to reproduce

Link to live example: (required)

Steps:

1. Create a radio group that contains radios with disableIcon set and slotProps that change the background color of the action component when the radio is checked. e.g. This example from the docs
2. See that it's possible to select the different options, the background color changes, and the label text is still visible.
3. Remove the disableIcon prop and pass a checkedIcon and/or uncheckedIcon prop with a random icon from @mui/icons-material.
4. See that the background color of a selected radio hides the icon and label.

Current behavior

The label and icon are hidden when the option is selected.

demo.mov

Expected behavior

The label and icon should remain visible when the option is selected.

Context

Create a radio button group with options that change background color when selected and include icons.

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.4.1
  Binaries:
    Node: 21.7.3 - ~/.asdf/installs/nodejs/21.7.3/bin/node
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.0.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/joy: 5.0.0-beta.36 => 5.0.0-beta.36 
    @mui/material: ^5.15.15 => 5.15.15 
    @types/react: ^18.2.79 => 18.2.79 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.4.5 => 5.4.5 

Tested in Chrome, Safari, and Firefox

Search keywords: radio background color icon

[rsslldnphy]

Just to note, I'm trying to create an uncontrolled component so I am unable (as far as I cant tell) to do anything programmatically based on the inputs value (unless I guess I use a ref?)