动态分段控制按钮

Question

我已经用图标实现了段控制。我的代码工作正常，但如果我需要更多按钮，我的代码并不健壮。有人可以帮我简单的代码。 这是我的代码。

import React, { useState } from "react";
import "./segment.css";
import HomeAct from "../Icons/home_Active.png";
import HomeInAct from "../Icons/home_Inactive.png";
import NotificationAct from "../Icons/notification_Active.png";
import NotificationInAct from "../Icons/notification_Inactive.png";
import ProfileAct from "../Icons/profile_Active.png";
import ProfileInAct from "../Icons/profile_Inactive.png";
import QuestionAct from "../Icons/question_Active.png";
import QuestionInAct from "../Icons/question_Inactive.png";

const Segment = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div>
      <img
        onClick={() => setActiveIndex("Home")}
        className={"imageConf"}
        src={activeIndex === "Home" ? HomeAct : HomeInAct}
      />
      <img
        onClick={() => setActiveIndex("Notification")}
        className={"imageConf"}
        src={
          activeIndex === "Notification" ? NotificationAct : NotificationInAct
        }
      />{" "}
      <img
        onClick={() => setActiveIndex("Profile")}
        className={"imageConf"}
        src={activeIndex === "Profile" ? ProfileAct : ProfileInAct}
      />{" "}
      <img
        onClick={() => setActiveIndex("Question")}
        className={"imageConf"}
        src={activeIndex === "Question" ? QuestionAct : QuestionInAct}
      />
    </div>
  );
};

export default Segment;

如何让这段代码更加动态。