How to use the reakit/Tab.useTabState function in reakit

export const Profile: React.FC = ({
  match: {
    params: { username },
    url,
  },
}) => {
  // Replace with API
  const [data, setData] = useState(initialState);
  const [query, setQuery] = useState(``);
  const [isEditing, setIsEditing] = useState(false);
  const tabs = useTabState({
    manual: true,
    orientation: 'vertical',
    selectedId: 'Sandboxes',
  });

  const {
    state: {
      profile: { current: user, notFound },
    },
    actions: {
      profile: { profileMounted },
    },
  } = useOvermind();

  useEffect(() => {
    profileMounted({ username });

const App = () => {
  const tab = useTabState({ selectedId: "code" })
  return (
    <>
      
        
          Import SVG Code
        
        
          Import SVG File
        
        
          Settings

export const CreateSandbox: React.FC = props => {
  const { state } = useOvermind();
  const tab = useTabState({
    orientation: 'vertical',
    selectedId: state.isFirstVisit ? 'Welcome' : 'Create',
  });

  return (
    
      
        
          
          Welcome
        
        
          
          Create Sandbox

const App = () => {
  const tab = useTabState({ selectedId: 'code' })
  return (
    <>
      
        
          Import SVG Code
        
        
          Import SVG File

({
      forking = false,
      closing = false,
      createSandbox,
      store: { user },
    }: INewSandboxModalProps) => {
      const tabState = useTabState({ selectedId: '0' });

      const tabs: ITab[] = [
        'Overview',
        user && 'My Templates',
        'Client Templates',
        'Container Templates',
        'Import',
      ]
        .map((buttonName, index) => ({
          name: buttonName,
          tabIndex: String(index),
        }))
        .filter(({ name }) => Boolean(name));

      React.useEffect(() => {
        const selectedTab = tabs[tabState.currentId];