Using React-Icons to replace the arrow of Summary & Details html

Question

I am trying to replace the ugly arrow that comes with the <summary></summary> & <details></details> with a chevron up and chevron down from react-icons but when I do so I get
[object,Object] in return

FYI I am using styled-components as well

export const Details = styled.details`
  font-size: 17px;
  font-weight: 600;
  color: #00d5a1;
  padding: 0.5em 0.5em 0;
  &[open] {
    padding: 0.5em;
  }
 // setting my react-icon to after the text
  &[open] summary::after {
    content: '${BiChevronUp}';
  }
`;

&

export const Summary = styled.summary`
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  &[open] {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
  }
  :-webkit-details-marker {
    display: none;
  }
  list-style: none;
 // setting my react-icon to after the text
  ::after {
    content: ${BiChevronDown};
  }
`;

Can someone please assist? Not sure how I can avoid the [object,Object] and would appreciate if someone could help.

Kind regards