title: Objects are not valid as a React child with Styled components
body: <p>I am trying to render an image. Here's my code:</p>
  
  <p><code>Accordion.jsx</code></p>
  
  <pre><code>import React from 'react';
  import ArrowTemplate from "./ArrowTemplate";
  
  function Accordion() {
      return (
          &lt;div&gt;
              &lt;ArrowTemplate arrowType={"BlackDown"} styles={""}/&gt;
              {/*&lt;ArrowTemplate arrowType={"BlackUp"}/&gt;*/}
              {/*&lt;ArrowTemplate arrowType={"WhiteDown"} styles={"background:black"}/&gt;*/}
              {/*&lt;ArrowTemplate arrowType={"WhiteUp"} styles={"background:black"}/&gt;*/}
          &lt;/div&gt;
      );
  }
  
  export default Accordion;
  </code></pre>
  
  <p><code>ArrowTemplate.jsx</code></p>
  
  <pre><code>import BlackDownArrowSVG from './svgs/black-down-arrow.svg';
  import WhiteDownArrowSVG from './svgs/white-down-arrow.svg';
  import styled from 'styled-components';
  import PropTypes from 'prop-types';
  
  ArrowTemplate.propTypes = {
      arrowType: PropTypes.string,
      styles: PropTypes.string,
  };
  
  function ArrowTemplate(props) {
      const {arrowType, styles} = props;
      switch (arrowType) {
          case "WhiteDown":
              return (
                  styled.img.attrs({
                      src: WhiteDownArrowSVG,
                  })`${styles !== null ? styles : ""}`
              );
          case "BlackDown":
              return (
                  styled.img.attrs({
                      src: BlackDownArrowSVG,
                  })`${styles !== null ? styles : ""}`
              );
          case "WhiteUp":
              return (
                  styled.img.attrs({
                      src: WhiteDownArrowSVG,
                  })`transform: rotate(180deg); ${styles !== null ? styles : ""}`
              );
          case "BlackUp":
              return (
                  styled.img.attrs({
                      src: BlackDownArrowSVG,
                  })`transform: rotate(180deg); ${styles !== null ? styles : ""}`
              );
          default:
              throw("You need to pass arrowType");
      }
  }
  
  export default ArrowTemplate;
  </code></pre>
  
  <p>The SVG paths are correct. </p>
  
  <p>As the error I get this:</p>
  
  <blockquote>
    <p>Objects are not valid as a React child (found: object with keys {$$typeof, render, displayName, attrs, componentStyle, foldedComponentIds, styledComponentId, target, withComponent, warnTooManyClasses, toString}). If you meant to render a collection of children, use an array instead.
        in ArrowTemplate (at Accordion.jsx:7)</p>
  </blockquote>
  
  <p>When I console.log  I get a long object. But I get a similar object when I console.log the example code from the <a href="https://www.styled-components.com/docs/basics" rel="nofollow noreferrer">docs</a>:</p>
  
  <pre><code>const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;
  
  //^^^^^^^^^^^^^^^^^^^^^
  //This renders with no problem
  </code></pre>
  
  <p>Where am I going wrong here?</p>