React-tabs dropped clicks on tab switch when inspecting on mobile device

リンク先の CodeSandbox と gxpfor.csb.app を mobile view を有効にした Chrome DevTools で開き、入力欄周辺で発生するタブ切り替えの取りこぼしを再現します。クリック動作を追跡する前に、issue に示されている ReactTabs、ReactList、ReactTab の使用方法を確認してください。報告された mobile-view の設定で、各タブをクリックすると確実に対応するパネルへ切り替われば完了です。

I have a really weird problem with react-tabs

I have 2 desktops:

• Samsung 4k LU28R550UQUXEN
• MacBook pro m2 14"

Now if I run this code in the latest google chrome 108.0.5359.124 and then turn on mobile view (any mobile device)
Sometimes when I click on a tab, the input above gets focused but the tab didn't switch.
I have to click on the bottom of the text to switch the tabs.
What's most weird is when I drag the browser window to my mac, this problem does not exist.

import React, { useState } from "react";
import {
  Tab as ReactTab,
  Tabs as ReactTabs,
  TabList as ReactList,
  TabPanel as Panel
} from "react-tabs";
import "react-tabs/style/react-tabs.css";

const tabs = ["Not Started", "In Progress", "Completed"];

export default function App() {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <ReactTabs tabIndex={activeTab} setTabIndex={setActiveTab}>
      <div>
        <input placeholder="Type here" />
        <ReactList>
          {tabs.map((tab) => (
            <ReactTab key={tab} data-cy={tab}>
              {tab}
            </ReactTab>
          ))}
        </ReactList>
      </div>
      <div>
        <Panel>ccc</Panel>
        <Panel>bbb</Panel>
        <Panel>111</Panel>
      </div>
    </ReactTabs>
  );
}

code:
https://codesandbox.io/s/async-cloud-gxpfor

Just visit: https://gxpfor.csb.app/ and open developer tools with a mobile view

https://user-images.githubusercontent.com/193701/211524839-67a968ea-349a-406b-bf03-641643c6a0c1.mov