Error: No se encuentran coincidencias de sobrecarga para esta llamada. Error en TSX.

Soy nuevo en React y TypeScript.

Pasé los propTypes a un componente estilizado y me mostró este error:

No hay coincidencias de sobrecarga para esta llamada.

Sobrecarga 1 de 2, ‘(props: { order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; … 255 más …; onTransitionEndCapture?: TransitionEventHandler<…>; } & { …; } & { …; }): ReactElement<…>’, dio el siguiente error.

El tipo ‘{ children: Element[]; }’ no tiene las siguientes propiedades del tipo ‘{ order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; … 255 más …; onTransitionEndCapture?: TransitionEventHandler<…>; }’: order, client, orderDetail, confirmation y 2 más.

Sobrecarga 2 de 2, ‘(props: StyledComponentPropsWithAs<“div”, any, OrderCardProps, never, “div”, “div”>): ReactElement<styledcomponentpropswithas<“div”, any,=”” ordercardprops,=”” never,=”” “div”,=”” “div”=””>, string | JSXElementConstructor<…>>’, dio el siguiente error.

El tipo ‘{ children: Element[]; }’ no tiene las siguientes propiedades del tipo ‘{ order: Order; client: Client;….255 más …; onTransitionEndCapture?: TransitionEventHandler<…>; }’: order, client, orderDetail, confirmation y 2 más.ts(2769)

styles.ts

export const StatusLayout = styled.div<ordercardprops>`
display: flex;
> div {
    width: 40px;
    height: 40px;
    margin: auto 2px;

componant.tsx

“`typescript
export interface OrderCardProps {
order: Order
client: Client
orderDetail: OrderDetails
confirmation: Confirmation
shipping: Shipping
payment: Payment
}

export const OrderCard: React.FC<ordercardprops> = ({ order, …}) => { return ( ….
…
…
<statuslayout>
<div>
<icon size="{"l"}" color="{colors.blueDark3}" children=""></icon><mdpermphonemsg></mdpermphonemsg>}/>
</div>
“`</styledcomponentpropswithas<“div”,>