Objects are not valid as a React child with Styled components

Question

I am trying to render an image. Here's my code:

Accordion.jsx

import React from 'react';
import ArrowTemplate from "./ArrowTemplate";

function Accordion() {
    return (
        <div>
            <ArrowTemplate arrowType={"BlackDown"} styles={""}/>
            {/*<ArrowTemplate arrowType={"BlackUp"}/>*/}
            {/*<ArrowTemplate arrowType={"WhiteDown"} styles={"background:black"}/>*/}
            {/*<ArrowTemplate arrowType={"WhiteUp"} styles={"background:black"}/>*/}
        </div>
    );
}

export default Accordion;

ArrowTemplate.jsx

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;

The SVG paths are correct.

As the error I get this:

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)

When I console.log I get a long object. But I get a similar object when I console.log the example code from the docs:

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

//^^^^^^^^^^^^^^^^^^^^^
//This renders with no problem

Where am I going wrong here?

Answer 1

If you come across this when declaring a styled component, you could be forgetting the template literals at the end of the declaration. So

const AppContentWithSideBar = styled((props) => {
  return (
    <Wrapper>
      <Router>
        <SideBarWrapper>
          <SideBar />
        </SideBarWrapper>
        <MainWrapper>
          {props.children}
        </MainWrapper>
      </Router>
    </Wrapper>
  );
});

should be

const AppContentWithSideBar = styled((props) => {
  return (
    <Wrapper>
      <Router>
        <SideBarWrapper>
          <SideBar />
        </SideBarWrapper>
        <MainWrapper>
          {props.children}
        </MainWrapper>
      </Router>
    </Wrapper>
  );
})``;