优化条件渲染组件：如何规避布尔状态冗余问题？

我正在重构一段代码，原代码因大量if else语句和重复状态导致严重冗余。当前核心问题集中在状态管理与条件渲染上：我通过布尔状态来控制组件接收的图片props（分为wrong、correct、higher、lower四种jpg格式），依据两个对象的键值比较结果更新状态，再渲染对应组件。

单组判断的示例代码 #

obj1["int"] === obj2["int"] ? setIsRight(true)
: obj1["int"] < obj2["int"] ? setIsHigher(true)
: setIsHigher(false);

{isRight ? (<ChampionHint text="Class" img={right}/>) 
: isHigher ? (<ChampionHint text="Class" img={higher}/>) 
: (<ChampionHint text="Class" img={lower}/>)}

当前困境 #

• 多组判断的状态冗余：上述代码仅能处理一组键值对的比较，但我需要处理4组键值对的比较逻辑。按照现有写法，必须为每一组判断新增对应的状态，比如isRight2、isHigher2、isRight3、isHigher3等，导致状态数量急剧膨胀，代码冗余度拉满。
• 组件取消渲染的疑问：我猜测可以通过将isHigher、isRight设为undefined或null来取消组件渲染，但不确定这个方法是否完全可行，打算先解决核心状态冗余问题后再尝试。

需求 #

请问是否必须为每一组相似的判断逻辑创建新状态来复用图片？还是存在更高效的实现方式？

补充说明 #

• 代码参考中，Home.tsx为旧代码，NewRefactoring.tsx是我的重构尝试
• 预期效果如下：
  

内容的提问来源于stack exchange，提问作者Steven