Below is how I am using my reusable component Badge made by me. It has types of props as follows but this gives some kind of error as:
Here is full code,
const variantsMap = { done: "success", processing: "info", suspened: "warning", cancelled: "error",};interface ITransactionProps { status: "done" | "processing" | "suspened" | "cancelled"; label: string;}const MyComponent = ({ status, label }: ITransactionProps) => { return <Badge variant={variantsMap[status]}>{label}</Badge>;};interface IBadgeProps { variant: "success" | "info" | "warning" | "error"; children: string;}const Badge = ({ variant, children }: IBadgeProps) => { return <div className={`badge bordered circular ${variant}`}>{children}</div>;};How can this be solved in proper way? I would like to know all the ways if we can solve it in multiple ways.