Tabbar with Generics & custom prop / keyof

import React, { useEffect, useState } from 'react';
import cn from 'classnames';

interface Country {
  id: number;
  xxx: string;
  description: string;
}

const countries: Country[] = [
  { id: 1, xxx: 'Japan', description: 'bla bla 1'},
  { id: 2, xxx: 'Italy', description: 'bla bla 2'},
  { id: 3, xxx: 'Spain', description: 'bla bla 3'},
];

export default function App() {
  console.log('App: render')
  const [opened, setOpened] = useState<boolean>(true);
  const [active, setActive] = useState<Country>(countries[2])
  const tabClickHandler = (tab: Country) => {
    console.log(tab);
    setActive(tab);
  }
  const tabClickHandler2 = (tab: Country) => {
    console.log(tab);
  }
  return (
     <div className="container mt-2">
       <button onClick={() => setOpened(true)}>OPEN</button>
       <button onClick={() => setOpened(false)}>CLOSE</button>
       <Panel title="hello" style={{ width: 200}} isOpen={opened} toggle={() => console.log('ciao')}>
         <input type="text"/>
         <input type="text"/>
         <input type="text"/>
       </Panel>

       <Tabbar <Country>
         labelField="xxx"
          data={countries} onTabClick={tabClickHandler} active={active}/>
       <Tabbar labelField="xxx" data={countries} onTabClick={tabClickHandler2} />

       <img src={'https://maps.googleapis.com/maps/api/staticmap?center=' + active.xxx + '&zoom=5&size=200x100&key=AIzaSyDSBmiSWV4-AfzaTPNSJhu-awtfBNi9o2k'} alt=""/>
       <div>
       {active.description}
       </div>
     {/*  <Tabbar data={....} onTabClick={} active={}></Tabbar>*/}
     </div>
  );
}

interface TabbarProps<T> {
  data?: T[];
  active?: T;
  onTabClick: (tab: T) => void;
  labelField: keyof T;
}

interface TabbarItemProps {
  id: number;
  [key: string]: any;
}
export const Tabbar = <T extends TabbarItemProps>(props: TabbarProps<T>) => {
  const [tabActive, setTabActive] = useState<any>()

  useEffect(() => {
    setTabActive(props.active);
  }, [ props.active])

  function tabClickHAndler(item: T) {
    setTabActive(item);
    props.onTabClick(item);
  }

  return (
    <ul className="nav nav-tabs">
      {
        props.data?.map((item: T) => {
          const active = item.id === tabActive?.id;
          return <li key={item.id} className="nav-item" onClick={() => tabClickHAndler(item)}>
            <a className={cn('nav-link', { active })} >{item[props.labelField || 'name']}</a>
          </li>
        })
      }
    </ul>
  )
}

// PANEL COMPONENT
interface PanelProps {
  title: string;
  isOpen: boolean;
  toggle?: () => void;
}

const Panel: React.FC<PanelProps & React.HTMLProps<HTMLDivElement>> = props => {
  const [opened, setOpened] = useState<boolean>(true);
  const { children, title, isOpen, toggle, ...rest} = props;

  useEffect(() => {
    setOpened(props.isOpen);
  }, [ props.isOpen])

  function toggleHandler() {
    setOpened(!opened);
    if (props.toggle) {
      props.toggle();
    }
  }

  return (
    <div className={'card'} {...rest}>
      <div className={'card-header'} onClick={toggleHandler}>{props.title}</div>
      { opened && <div className="card-body">{props.children} </div>}
    </div>
  )
}