Changing icons for Segment In React Js

I am implementing a Segment bar for React Js Using a functional component. currently i am changing the color of the highlighted button index. This is my code for Segment

import React, { useState } from "react";
import "./segment.css";

const buttons = [
  { name: "Bat" },
  { name: "Ball" },
  { name: "Tennis" },
  { name: "Shuttle" },
];

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

  return (
    <div>
      {buttons.map((u, i) => (
        <button
          className={i === activeIndex ? "segment_active" : "segment_inActive"}
          onClick={() => setActiveIndex(i)}
          key={u.name}
        >
          {u.name}
        </button>
      ))}
    </div>
  );
};

export default Segment;

The code above one is working as expected but now I need to put an icon instead of a name and making it highlight.

my icon names are Bat_active and Bat_InActive etc.. Can someone let me know that how to change the Active icon on the button click?