wrapping.js

import React, { useState } from "react"

function UiButton({ onToggle, isActive: isActiveProp, ...props }) {
  const [isActive, setIsActive] = useState(isActiveProp)

  const isControlled = isActive != null

  const clickHandler = isControlled
    ? onToggle
    : () => {
        onToggle()
        setIsActive(!isActive)
      }

  return (
    <button
      style={{
        color: isActive ? "blue" : "red"
      }}
      onClick={clickHandler}
    />
  )
}

function Tab({ isActive, onSelect, ...props }) {
  return <UiButton isActive={isActive} onToggle={onSelect} {...props} />
}