title: How to change div as per selected value from material UI <TextField /> dropdown in react js?
body: <p>I have two <code>divs</code> one is displaying by default second one is hide by default. I have one <code>&lt;TextField /&gt;</code> dropdown list from react js material UI.</p>
  <p>Now I want to hide first <code>div</code> and display second <code>div</code> if user selected value == 'Custom Value'</p>
  <p>How can i do this?</p>
  <p>My Code:-</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function MyComponent() {
   const inputSourceOptions = [
      { key: "Fax", value: "Fax" },
      { key: "Care Radius", value: "Care Radius" },
      { key: "Custom Value", value: "Custom Value" },
    ];
    
      const handleChangeInput = (id, event) =&gt; {
                console.log(event.target.value);
      });
      
      return (
      &lt;&gt;
        &lt;TextField
                      className="ruleContainer"
                      select
                      name="rule_source"
                      label="Source"
                      variant="outlined"
                      size="small"
                      value={inputField.rule_source}
                      onChange={(event) =&gt;
                        handleChangeInput(inputField.id, event)
                      }
                    &gt;
                      {inputSourceOptions.map((opt) =&gt; (
                        &lt;MenuItem key={opt.key} value={opt.key}&gt;
                          {opt.value}
                        &lt;/MenuItem&gt;
                      ))}
                    &lt;/TextField&gt;
  &lt;div  style={{ display:'none'}}&gt;this is div one&lt;/div&gt;
  &lt;div&gt;this is div two&lt;/div&gt;
      &lt;/&gt;
    );
  }
      
      export default MyComponent;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks for your support!</p>