Passing function with arguments as a prop and invoking it internally in React

I got a Badge component in my React app. The badge can be painted in different colors. In order to make it more universal i’ve decided to add a prop called getBadgeColor. The idea is to implement different functions for different needs. For example, in one scenario i need badges for loading statuses. So i implement the function getStatusBadgeColor that looks like this:

enum BadgeColors {
    RED = 'red',
    YELLOW = 'yellow',
    GREEN = 'green',
    BLUE = 'blue',
    INDIGO = 'indigo',
    PURPLE = 'purple',
    PINK = 'pink',
}

export type BadgeColor = typeof BadgeColors[keyof typeof BadgeColors];

export type getBadgeColor<T> = (value: T) => BadgeColor;

export const getStatusBadgeColor: getBadgeColor<TStatus> = (status: TStatus) => {
    switch (status) {
        case Statuses.STATUS_SUCCESS:
            return BadgeColors.GREEN;
        case Statuses.STATUS_ERROR:
            return BadgeColors.INDIGO;
        default:
            return BadgeColors.BLUE;
    }
}

My Badge component looks like this.

interface BadgeProps<T> {
    label: string;
    color?: BadgeColor;
    getBadgeColor?: getBadgeColor<T>;
    value?: T
}

export const Badge = <T,>({ label, color, getBadgeColor}: BadgeProps<T>) => {

    const colorValue = getBadgeColor ? getBadgeColor() : color

    return (
        <span className="...">
            <svg className={cn('h-1.5', 'w-1.5', `fill-${colorValue}-500`)} viewBox="0 0 6 6" aria-hidden="true">
                <circle cx={3} cy={3} r={3} />
            </svg>
            {label}
        </span>
    )
}

I pass the function like this

<Badge label={record.status} getBadgeColor={() => getStatusBadgeColor(record.status)}  />

So the problem is basically that i can’t invoke a function inside the Badge component without calling it with arguments. Is there is a way i can do it? I would appreciate any help