así que estoy viendo un video tutorial y tengo un código como este, pero como estoy usando componentes con estilo, estoy confundido acerca de cómo agregar statusClass(0) dentro del código de componentes con estilo

y este es mi guion:

• por peinarte así

 const HasDone = styled.div` display: flex; flex-direction: column; align-items: center; `; const InProggress = styled.div` display: flex; flex-direction: column; align-items: center; animation: inProgress 1s ease infinite alternate; @keyframes inProgress { from { opacity: 0; } to { opacity: 1; } } `; const Undone = styled.div` display: flex; flex-direction: column; align-items: center; opacity: 0.3; `;

• llámalo aquí también haz que funcione igual que un video

 const Order = () => { const status = 0; const StatusClass = (index) => { if (index - status < 1) return HasDone; if (index - status === 1) return InProggress; if (index - status > 1) return Undone; }; return ( <Container> <Left> <Row> ..... </Row> <Row> <StatusClass> <PaymentOutlined style={{ color: "black", width: "30", height: "30" }} /> <span>Payment</span> <CheckedIcon> <CheckBoxOutlined style={{ color: "black", width: "30", height: "30" }} /> </CheckedIcon> </StatusClass>

como puede ver, porque estoy usando componentes con estilo, también cambia el elemento HTML.

si trato de cambiar así

<StatusClass(0)>

Me da un error, ¿cómo convierto esto en el componente con estilo?