title: Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided
body: <p>i had created card component and i called in my ProductPage.js after that i am getting error like  Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Card.c3b0a67ff849f2bda062.JS') is not a valid name.
  initially it was div and i change to card after that i am getting above error if changed div then it is working fine how can i solve this issue.
  For ref Please find the attached image.
  <a href="https://i.stack.imgur.com/TALEh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TALEh.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/j3zeF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j3zeF.jpg" alt="enter image description here" /></a></p>
  <p>and code is like this.</p>
  <p>ProductPage.js</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  import { getProductPage } from &quot;../redux/actions&quot;;
  import { useLocation } from &quot;react-router-dom&quot;;
  import getParams from &quot;../utils/getParams&quot;;
  import &quot;react-responsive-carousel/lib/styles/carousel.min.css&quot;; // requires a loader
  import { Carousel } from &quot;react-responsive-carousel&quot;;
  import Card from &quot;../Components/Card.JS&quot;;
  
  function ProductPage() {
    const dispatch = useDispatch();
    const product = useSelector((state) =&gt; state.product);
    const { page } = product;
    const { search } = useLocation();
  
    useEffect(() =&gt; {
      const params = getParams(search);
      console.log(params);
      const payload = {
        params,
      };
      dispatch(getProductPage(payload));
    }, []);
    return (
      &lt;div style={{ margin: &quot;0 10px&quot; }}&gt;
        {page.title}
        &lt;Carousel renderThumbs={() =&gt; {}}&gt;
          {page.banners &amp;&amp;
            page.banners.map((banner, index) =&gt; (
              &lt;a
                key={index}
                style={{ display: &quot;block&quot; }}
                href={banner.navigateTo}
              &gt;
                &lt;img src={banner.img} alt=&quot;&quot; /&gt;
              &lt;/a&gt;
            ))}
        &lt;/Carousel&gt;
        &lt;div&gt;
          {page.products &amp;&amp;
            page.products.map((product, index) =&gt; (
              &lt;Card key={index}&gt;
                &lt;img src={product.img} alt=&quot;&quot; /&gt;
              &lt;/Card&gt;
            ))}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default ProductPage;
  </code></pre>
  <p>Card.js</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./style.css&quot;;
  
  function Card(props) {
    return &lt;div className=&quot;card&quot;&gt;{props.card}&lt;/div&gt;;
  }
  
  export default Card;
  </code></pre>