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

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

Open the linked CodeSandbox and gxpfor.csb.app in Chrome DevTools with mobile view enabled, then reproduce the missed tab switches around the input. Read the ReactTabs, ReactList, and ReactTab usage shown in the issue before tracing the click behavior. Done means clicking each tab reliably switches to its corresponding panel in the reported mobile-view setup.