IonTabButton onClick not capturing

onClick do tab profile tem um onClick porem esse onClick não responde, alguem pode me ajudar?
reparem que tem uma div dentro desse ionTabButton, bom preciso que o menu abra quando o usuario clicar na tab profile, então fiz essa gambiarra pra funcionar, mas o IonTabButton deveria funcionar

const App: React.FC = () => {
  const ref = React.useRef(null);
  const dispatch = useDispatch();
  const activeItem = useSelector((state: State) => state.general.menuActive);

  React.useEffect(() => {
    console.log(ref.current);
  }, [ref]);

  console.log(activeItem);

  return (
    <IonApp>
      <Styled.GlobalApp />
      <IonReactRouter history={customHistory}>
        <Menu />

        <IonRouterOutlet id="main-menu">
          <Route path="/" exact component={LoadingPage} />
          <Route path="/login" exact component={Login} />

          {/* Reset Password Pages */}
          <Route path="/reset-password/first-step" component={FirstStep} />
          <Route path="/resetPassword/secondStep" component={SecondStep} />
          {/* Panel Pages */}

          <IonTabs
            onIonTabsWillChange={(e) => {
              console.log(e);
              dispatch(setMenuActive(e.detail.tab));
            }}
          >
            <IonRouterOutlet id="tabs">
              <PrivateRoute exact path="/dashboard">
                <Dashboard />
              </PrivateRoute>

              {/* Users do corban */}
              <PrivateRoute
                path="/users/list"
                module={GroupModulesEnum.USERS}
                exact
              >
                <UserList />
              </PrivateRoute>

              <PrivateRoute
                path="/users/view"
                module={GroupModulesEnum.USERS}
                exact
              >
                <UserView />
              </PrivateRoute>

              <PrivateRoute
                path="/users/add"
                module={GroupModulesEnum.USERS}
                exact
              >
                <UserAdd />
              </PrivateRoute>
              {/* Users do corban */}

              {/* Customers Pages */}
              <PrivateRoute path="/customers" exact>
                <Customers />
              </PrivateRoute>

              <PrivateRoute exact path="/profile">
                <Profile />
              </PrivateRoute>

              <PrivateRoute
                path="/customers/list"
                module={GroupModulesEnum.CLIENTS}
                exact
              >
                <CustomersList />
              </PrivateRoute>

              <PrivateRoute
                path="/customers/view"
                module={GroupModulesEnum.CLIENTS}
                exact
              >
                <CustomerView />
              </PrivateRoute>

              <PrivateRoute
                path="/customers/add"
                module={GroupModulesEnum.CLIENTS}
                exact={true}
              >
                <CustomerAdd />
              </PrivateRoute>

              {/* Solicitations Pages */}
              <PrivateRoute
                path="/customers/:customer_uuid/requests"
                module={GroupModulesEnum.CLIENTS}
                exact
              >
                <RequestCustomerList />
              </PrivateRoute>

              <PrivateRoute
                exact
                module={GroupModulesEnum.CLIENTS}
                path="/customers/:customer_uuid/requests/:request_uuid"
              >
                <SolicitationView />
              </PrivateRoute>

              <PrivateRoute
                path="/customers/solicitations/add"
                module={GroupModulesEnum.CLIENTS}
                exact={true}
              >
                <SolicitationAdd />
              </PrivateRoute>

              <PrivateRoute
                path="/customers/solicitations/recent"
                module={GroupModulesEnum.PROPOSES}
                exact
              >
                <Recent />
              </PrivateRoute>
              {/* Solicitations Pages */}

              {/* Customers Pages */}

              {/* Open Finance Pages */}
              <PrivateRoute
                path="/openfinance"
                module={GroupModulesEnum.OPEN_FINANCE}
                exact={true}
              >
                <OpenFinance />
              </PrivateRoute>

              <PrivateRoute
                path="/openfinance/:item_uuid/view"
                module={GroupModulesEnum.OPEN_FINANCE}
                exact={true}
              >
                <OpenFinanceView />
              </PrivateRoute>

              <PrivateRoute
                path="/openfinance/identity"
                module={GroupModulesEnum.OPEN_FINANCE}
                exact={true}
              >
                <OpenFinanceIdentity />
              </PrivateRoute>

              <PrivateRoute
                path="/openfinance/ted"
                module={GroupModulesEnum.OPEN_FINANCE}
                exact={true}
              >
                <OpenFinanceTED />
              </PrivateRoute>

              <PrivateRoute
                path="/openfinance/investment"
                module={GroupModulesEnum.OPEN_FINANCE}
                exact={true}
              >
                <OpenFinanceInvestment />
              </PrivateRoute>

              <PrivateRoute
                path="/openfinanceterm"
                module={GroupModulesEnum.OPEN_FINANCE}
                exact={true}
              >
                <Term />
              </PrivateRoute>
              {/* Open Finance Pages */}

              {/* Digital Account Pages */}
              <PrivateRoute path="/digitalaccount" exact={true}>
                <DigitalAccount />
              </PrivateRoute>

              <PrivateRoute path="/digitalaccount/view" exact={true}>
                <DigitalAccountView />
              </PrivateRoute>

              <PrivateRoute path="/digitalaccount/add" exact={true}>
                <DigitalAccountAdd />
              </PrivateRoute>

              {/* Digital Account Pages */}

              {/* Comission Pages */}
              <PrivateRoute path="/comission/table" exact={true}>
                <ComissionTable />
              </PrivateRoute>

              <PrivateRoute path="/comission/simulator" exact={true}>
                <ComissionSimulator />
              </PrivateRoute>

              <PrivateRoute path="/comission/charts" exact={true}>
                <ComissionCharts />
              </PrivateRoute>
              {/* Comission Pages */}

              {/* Terms and Conditions Pages */}
              <PrivateRoute path="/termsandconditions" exact={true}>
                <TermsAndConditions />
              </PrivateRoute>
              {/* Terms and Conditions Pages */}

              {/* Profile Pages */}
              <PrivateRoute path="/profile" exact={true}>
                <Profile />
              </PrivateRoute>

              <PrivateRoute path="/edit" exact={true}>
                <Edit />
              </PrivateRoute>

              <PrivateRoute path="/experience" exact={true}>
                <Experience />
              </PrivateRoute>

              <PrivateRoute path="/certifications" exact={true}>
                <Certifications />
              </PrivateRoute>

              <PrivateRoute path="/contato" exact={true}>
                <Contato />
              </PrivateRoute>
              {/* Profile Pages */}

              {/* Notifications Pages */}
              <PrivateRoute path="/notifications" exact={true}>
                <Notifications />
              </PrivateRoute>
              {/* Notifications Pages */}

              {/* Notifications Pages */}
              <PrivateRoute path="/searchpage" exact={true}>
                <SearchPage />
              </PrivateRoute>
              {/* Notifications Pages */}

              {/* CRM Pages */}
              <PrivateRoute path="/crm/kanban" exact={true}>
                <BitrixKanban />
              </PrivateRoute>

              <PrivateRoute
                path="/comments/:ID"
                module={GroupModulesEnum.PROPOSES}
                exact={true}
              >
                <Comments />
              </PrivateRoute>
              {/* CRM Pages */}

              {/* Page de Email */}
              <PrivateRoute path="/email" exact={true}>
                <Email />
              </PrivateRoute>
              {/* Page de Email */}
            </IonRouterOutlet>
            <IonTabBar
              slot="bottom"
              id="tabBar"
              selectedTab={activeItem}
              onChange={(e) => {
                console.log(e);
              }}
              itemType={'button'}
              onIonTabsWillChange={(e) => console.log('e', e)}
            >
              <IonTabButton tab="customers" href="/customers">
                <IonIcon icon={logoCustomers} style={{ width: '100%' }} />
                <IonLabel>Carteira</IonLabel>
              </IonTabButton>
              <IonTabButton tab="crm" href="/crm/kanban">
                <IonIcon icon={logoCRM} style={{ width: '100%' }} />
                <IonLabel>Propostas</IonLabel>
              </IonTabButton>
              <IonTabButton tab="dashboard" href="/dashboard">
                <IonIcon icon={logoHome} style={{ width: '100%' }} />
                <IonLabel>Home</IonLabel>
              </IonTabButton>
              <IonTabButton
                tab="profile"
                onClick={(e) => {
                  console.log('oi');
                }}
              >
                <div
                  className="btn-profile"
                  onClick={async () => await menuController.open()}
                >
                  <IonIcon icon={logoProfile} style={{ width: '100%' }} />
                  <IonLabel>Perfil</IonLabel>
                </div>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>

          {/* Panel Pages */}
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

1 post - 1 participant

Read full topic