[Radio] Radio not getting checked when the value is not a string

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I passed a number type data to the value property of the Radio component.

And then, none of the radio inputs were checked whenever I click any of them.

Now I solved the problem by casting data to a string. It happened because the identity operator(===) is used between the original value and serialized one to determine whether checked or not. https://github.com/mui-org/material-ui/blob/5d3d9071b2cde2b773d62152f16cc7b81a1bf576/packages/material-ui/src/Radio/Radio.js#L95

But I think the document is needed to be updated because it says value can be any type, but only works normally when the value is a string. It makes users get confused.

How do you think?

Expected Behavior 🤔

Radio is checked normally even if a value is not a string.

Or the allowed type of value should be updated with string in the document

Your Environment 🌎

`npx @material-ui/envinfo`

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

[sakura90]

Can’t find time to work on this issue for the previous days.

Have some private things to do, so I am going to be unavailable for atleast a few more days. For other people please feel free to continue the work.

I am going to continue working the issue when I am back if nobody works on it.

[oliviertassinari]

@sakura90 Yes, well spotted. This looks complely inaccurate:

Maybe for consistency?

diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.d.ts b/packages/material-ui/src/RadioGroup/RadioGroup.d.ts
index 1a599e120c..7f9b989fd8 100644
--- a/packages/material-ui/src/RadioGroup/RadioGroup.d.ts
+++ b/packages/material-ui/src/RadioGroup/RadioGroup.d.ts
@@ -5,7 +5,7 @@ export interface RadioGroupProps extends Omit<FormGroupProps, 'onChange'> {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: FormGroupProps['defaultValue'];
+  defaultValue?: any;
   /**
    * The name used to reference the value of the control.
    * If you don't provide this prop, it falls back to a randomly generated name.

Actually, looking back at https://github.com/mui-org/material-ui/issues/26333#issuecomment-848301294, shouldn’t we do exactly like the Select #13408?

diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index eb6010460f..f0ab461209 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -63,6 +63,14 @@ const RadioRoot = styled(SwitchBase, {
   },
 }));

+function areEqualValues(a, b) {
+  if (typeof b === 'object' && b !== null) {
+    return a === b;
+  }
+
+  return String(a) === String(b);
+}
+
 const defaultCheckedIcon = <RadioButtonIcon checked />;
 const defaultIcon = <RadioButtonIcon />;

@@ -91,7 +99,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {

   if (radioGroup) {
     if (typeof checked === 'undefined') {
-      checked = radioGroup.value === props.value;
+      checked = areEqualValues(radioGroup.value, props.value);
     }
     if (typeof name === 'undefined') {
       name = radioGroup.name;

to support rich objects.