[Select][material][joy] add clearable prop to clear value

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live working example of other library component:
https://element.eleme.io/#/en-US/component/select#clearable-single-select

Steps:
In above codepen, just tried to tell how simple this feature can be, why we are making it complex.
After using select component i found material doesn't have clearable feature, joy ui has that but it extra complex, need to add endDecorator and have to do magic our own ends.

Current behavior 😯

we can't clear selected value instead need to add extra option for that.

Expected behavior 🤔

there should be simple props option that will be able to handle this thing.

Context 🔦

work around is available, we can add extra option with empty value.

Your environment 🌎

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