Создание компонента NotificationBadge в React

Question

Я пытался создать компонент, который служит оболочкой для его дочерних элементов и будет отображать значок в правом верхнем углу своего дочернего элемента верхнего уровня.

Пока что компонент и пример того, чего я пытаюсь достичь

export interface IndicatorProps {
    text?: string;
    children: React.ReactNode;
    containerClassName?: string;
    indicatorClassName?: string;
    indicatorStyle?: React.CSSProperties;
}

export const Indicator = (props: IndicatorProps) => {
    const { children, indicatorClassName, indicatorStyle, containerClassName, text } = props;
    const containerClass = classnames("relative", containerClassName);
    const indicatorClass = classnames("indicator z-10 absolute", indicatorClassName);

    return (
        <div className={containerClass}>
            {children}
            <i style={indicatorStyle} className={indicatorClass}>
                {text}
            </i>
        </div>
    );
};


//Styling in separate file

.indicator {
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    color: white;
    font-size: 10px;
    line-height: 1rem;
    height: 1rem;
    width: 1rem;
    top: -20%;
    right: -20%;
    text-align: center;
}

В идеале я хотел бы сделать следующее: у меня есть значок уведомления в правом верхнем углу

К сожалению, мой текущий код разрывается, когда дочерний элемент div абсолютно позиционирован, и требует, чтобы я вместо этого передал любое из имен классов / стилей дочернему элементу div индикатору.

Если что я написанное не очень логично или требует дальнейшего объяснения, пожалуйста, дайте мне знать, что я понимаю, что я немного пошутил.

Спасибо за любую помощь, которую вы можете мне дать.