checkedIcon and uncheckedIcon under radio button in material ui are both being triggered?
<p>I have a following code:  </p>

<pre><code>const PlatformRadioButton = ({onPlatform}) =&gt; (
&lt;div&gt;
&lt;RadioButtonGroup style={{ display: 'flex', maxWidth: 100}} 
                  name="platform" 
                  defaultSelected="9" 
                  onChange={(e,v) =&gt; onPlatform(v)} &gt;
  &lt;RadioButton 
    value="9"
    checkedIcon={&lt;PlatformIcon platform="ios" color="blue" /&gt;}
    uncheckedIcon={&lt;PlatformIcon platform="ios" color="gray" /&gt;}
    style={styles.radioButton}
  /&gt;
&lt;/RadioButtonGroup&gt;
&lt;/div&gt;
);

export default PlatformRadioButton;
</code></pre>

<p>and the other piece of code is this: </p>

<pre><code>import React, {Component} from 'react';

const PlatformIcon = (props) =&gt; {
let platform = props.platform, 
    color = props.color;
if (platform == "all"){
    platform = "ios_android";
}
var imgPath = "/static/img/banner_toggle_" + platform + "_" + color +      ".png";

return &lt;img src={imgPath} /&gt;
}

export default PlatformIcon;
</code></pre>

<p>Not sure..why both checkedIcon and uncheckedIcon are being triggered at the same time..I feel like I am missing a piece of code..could someone shed a light on this please..</p>