title: React does not recognize the X prop on a DOM element
body: <p>I am beginner developer and I am working on react (gatsby, TS, styled components) project. I am getting this error:</p>
  <p>&quot;React does not recognize the <code>isOpen</code> prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase <code>isopen</code> instead. If you accidentally passed it from a parent component, remove it from the DOM element.&quot;</p>
  <pre><code>export const Navigation = () =&gt; {
        const [isNavigationOpen, setIsNavigationOpen] = useState(false);
        const { isTablet } = useQuery();
      
        const showNavbar = () =&gt; {
          setIsNavigationOpen((previousState) =&gt; !previousState);
        };
      
        const renderElement = isTablet ? (
          &lt;&gt;
            &lt;SvgStyled
              src='bars_icon'
              isOpen={isNavigationOpen}
              onClick={showNavbar}
            /&gt;
            &lt;MobileNavigation isOpen={isNavigationOpen}&gt;
              {NAVIGATION_DATA.map(({ id, url, text }) =&gt; (
                &lt;LinkMobile key={id} to={url}&gt;
                  &lt;ExtraSmallParagraph&gt;{text}&lt;/ExtraSmallParagraph&gt;
                &lt;/LinkMobile&gt;
              ))}
            &lt;/MobileNavigation&gt;
          &lt;/&gt;
        ) : (
          &lt;FlexWrapper&gt;
            {NAVIGATION_DATA.map(({ id, url, text }) =&gt; (
              &lt;LinkDekstop key={id} to={url}&gt;
                &lt;ExtraSmallParagraph&gt;{text}&lt;/ExtraSmallParagraph&gt;
              &lt;/LinkDekstop&gt;
            ))}
          &lt;/FlexWrapper&gt;
        );
      
        return renderElement;
      };
  </code></pre>
  <p>I am sure that I am missing some fundamental react stuff or something. Maybe someone could help me and explain the reason of this error.</p>