[pickers] sx property of PickersDay doesn't update properly when controlled by state in renderDay function

[TheUnlocked]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

State changes within a component in the renderDay function of a date picker (e.g. StaticDatePicker), when applied to the sx property of the PickersDay component, do not apply any change to the PickersDay element's styling without another property being updated. Other properties (e.g. selected) do.

Expected behavior 🤔

When the value of sx changes it should update the styling.

Steps to reproduce 🕹

CodeSandbox

Context 🔦

I'm trying to make the day elements a drop target for drag-and-drop, and I want to change the styling when a day is being hovered over to provide visual feedback to the user.

Your environment 🌎

Chrome 104

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.17.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - D:\Users\Unlocked\AppData\Roaming\npm\yarn.CMD
    npm: 8.16.0 - D:\Users\Unlocked\AppData\Roaming\npm\npm.CMD   
  Browsers:
    Chrome: 104.0.5112.102
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.70)     
  npmPackages:
    @emotion/react: ^11.6.0 => 11.10.0 
    @emotion/styled: ^11.6.0 => 11.10.0 
    @mui/base:  5.0.0-alpha.94 
    @mui/core-downloads-tracker:  5.10.2 
    @mui/icons-material: ^5.10.2 => 5.10.2 
    @mui/lab: ^5.0.0-alpha.46 => 5.0.0-alpha.96 
    @mui/material: ^5.10.2 => 5.10.2 
    @mui/private-theming:  5.9.3 
    @mui/styled-engine:  5.10.2
    @mui/system: ^5.10.2 => 5.10.2
    @mui/types:  7.1.5
    @mui/utils:  5.9.3
    @mui/x-data-grid: ^5.15.3 => 5.15.3
    @mui/x-date-pickers: ^5.0.0-beta.6 => 5.0.0-beta.6
    @types/react: 17.0.19 => 17.0.19
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.7.4 => 4.7.4

Order ID 💳 (optional)

No response