Manipulating visibility of a Material UI/React Badge component based on content in the badgeContent

You could also just render the badge when name.warningsCount is not empty:

{name.warningsCount > 0 && (
    <Badge
        className="warning-badge"
        badgeContent={name.warningsCount}
    >
        <AlertWarning />
    </Badge>
)}

No need to hide elements that shouldn't be rendered in the first place.

Latest Material UI version will not show a badge by default if the value is zero. This is because of a new showZero property which defaults to false. Then previous versions included the invisible property where you could put something like invisible={name.WargningsCount === 0}