[Select][base-ui][joy-ui] Option with `null` value cannot be marked as selected

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/elated-field-eygwhs?file=/demo.js

Steps:

1. Select the "None" option
2. Open the select again, the "None" option won't be marked as active

Current behavior 😯

When selecting a Option with its value set to null, the Select box itself will correctly show "None" as its active value, but the dropdown will not mark the option.

There is more inconsistent and unexpected behavior too:

• When the option with null and opening the menu again you can now not navigate with the arrow-down key away from it. Only arrow up will move the focus to another option. Once another option is in focus the arrow keys work as expected.
• Once focus is not on the option with null as its value, it is now impossible to go back to null. While the option is still counted when navigating with the arrow keys (it takes 2 keystrokes to move from above it to below it as expected) the option itself is never in focus.

Expected behavior 🤔

The null option is marked as the selected value and can be selected with keyboard navigation.

Context 🔦

No response

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.