so im watching a video tutorial and have code like this, but since im using styled-components im confuse about how to add statusClass(0) inside styled-components code

and this is my script:

• for styling like this

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;

`;

• call it here also make it function the same as a 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>

as you can see because I'm using styled-components changes the HTML element too.

if I try to change like this

<StatusClass(0)>

It gives me an error so how do I convert this to the styled component?