In my application, I want to conditionally render 2 different Tooltip from recharts library depending if level.value != "A"

As seen below, I try to achieve this by using a ternary operator, as modeled in this article https://flexiple.com/react/conditional-rendering-in-react/. However, now no Tooltip shows up if the level is A or not. Also when I console.log(level.value != "A") it is evaluating correctly.

return(
    <>
//other code
        <div>
           {(level.value != "A") ? (
             <Tooltip labelStyle={{ color: "black" }} />
           ) : (
            <Tooltip content = {<CustomTooltip/> } labelStyle={{ color: "black" }} />
           ) }            
        </div>   
    </>
);

Update: Needed !== instead of !=