tab menu corresponding button active

Hello I am making a tab menu right now.
My problem is that I want to give is-active when the button is clicked, but I don’t know what value to put in the empty space there.

type Props = {
  title: string
  index: number
  setSelectedTab: (index: number) => void
}

const TabTitle: React.FunctionComponent<Props> = ({ title, setSelectedTab, index }) => {
  
  // The value to be activated. Initial value is `0th button`
  const [activeIndex, setActiveIndex] = useState(0);
  

  const onClick = useCallback(() => {
    setSelectedTab(index)
  }, [setSelectedTab, index])


  return (
    <li>
      <button
      key={index}
      className={activeIndex === [empty place] ? "is-active" : ""} 
      onClick={() => onClick()}
      >
        {title}
        </button>
    </li>
  )
}

 console.log(index);
  // 0
  // 1 
  // 2 

How to use the index value If you click the 0th button, index : 0
If ​​you click the 1st button, index: 1
After making it like this, className={activeIndex === index ? "is-active" : ""} If you put index , it will work normally, but I don’t know how to make an index like that.

How can I set the index to give first click 0 second click 1 ​according to the clicked value?