Estoy tratando de reemplazar la fea flecha que viene con <summary></summary> & <details></details> con un chevron up y un chevron down de react-icons pero cuando lo hago, obtengo
[object,Object] a cambio

Para su información, también estoy usando styled-components

 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}; } `;

¿Puede alguien por favor ayudar? No estoy seguro de cómo puedo evitar el [object,Object] y agradecería si alguien pudiera ayudar.

Atentamente