[FloatingActionButton] Hover color wrong with custom colors

Duplicates

• I have searched the existing issues

Related: #30665 #30846

Latest version

• I have tested the latest version

Current behavior 😯

It gets white on hover

+ I get the error

Failed prop type: Invalid prop `color` of value `orange` supplied to `ForwardRef(Fab)`, expected one of ["default","error","info","inherit","primary","secondary","success","warning"].

Expected behavior 🤔

It should get a bit darker color than the normal state one

Steps to reproduce 🕹

https://codesandbox.io/s/floatingactionbuttons-material-custom-color-demo-0jt2n?file=/index.tsx

Context 🔦

I'm trying to create an accent color picker

Your environment 🌎

Tested with Firefox and Brave

  System:
    OS: Linux 5.16 Arch Linux
  Binaries:
    Node: 16.13.2 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.4.1 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 97.0
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.68 
    @mui/icons-material: ^5.4.1 => 5.4.1 
    @mui/material: ^5.4.1 => 5.4.1 
    @mui/private-theming:  5.4.1 
    @mui/styled-engine:  5.4.1 
    @mui/system:  5.4.1 
    @mui/types:  7.1.1 
    @mui/utils:  5.4.1 
    @mui/x-data-grid: ^5.5.1 => 5.5.1 
    @types/react: ^17.0.39 => 17.0.39 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ~4.5.5 => 4.5.5

Start with the linked CodeSandbox reproduction and inspect the FloatingActionButton handling of custom color values and hover styling. Confirm the behavior against the reported invalid color warning; done means custom colors remain valid and the hover state is a slightly darker version of the normal color without the warning.