title: Horizontal Material-ui Divider is not getting displayed using as a React Component. How to resolve this issue?
body: <p>I am using <code>Divider</code> as a React Component but it is not getting displayed. I have tried reading the API documentation but I couldn't understand the usage of it and demos. How can this issue be resolved?</p>
  <p>This is how it is displayed</p>
  <p><a href="https://i.stack.imgur.com/6m1U5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6m1U5.png" alt="" /></a></p>
  <p>Component:</p>
  <pre><code>import './styles.css';
  import Products from '../../../Assets/Products.png';
  import Divider  from '../../../../node_modules/@material-ui/core/Divider';
  
  const ProductsSection = () =&gt; {
      return (
          &lt;div className=&quot;ProductContainer&quot;&gt;
              &lt;p&gt;INSTALLED OVER 10 LAKHS STAR RATED PUMPSETS ACROSS THE COUNTRY RESULTING IN A CUMULATIVE SAVING OF MORE THAN 9,000 MILLION UNITS OF POWER FOR THE NATION.&lt;/p&gt;
              &lt;img id=&quot;ProductImage&quot; src={Products} alt=&quot;Products&quot; /&gt;
              &lt;p&gt;Valves - Pumps - Pipes - IoT Drives &amp; Controllers - Wires &amp; Cables - Solar Systems - Motors &lt;/p&gt;
              &lt;Divider variant=&quot;middle&quot;/&gt;
              &lt;p&gt;C.R.I. FLUID SYSTEMS PRODUCTS CATER TO DIVERSE SEGMENTS&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  
  export default ProductsSection;
  </code></pre>