message: bug: work around a material ui bug of calling the callback twice
diff: import { makeStyles } from '@material-ui/core/styles';
  import TabUI, { TabProps } from '@material-ui/core/Tab';
  import Tabs from '@material-ui/core/Tabs';
  -import React, { useEffect, useState } from 'react';
  +import React, { useCallback, useEffect, useState } from 'react';
  /** @public */
  export type HeaderTabsClassKey =
  @@ -80,12 +80,15 @@ export function HeaderTabs(props: HeaderTabsProps) {
  const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);
  const styles = useStyles();
  - const handleChange = (_: React.ChangeEvent<{}>, index: number) => {
  + const handleChange = useCallback(
  + (_: React.ChangeEvent<{}>, index: number) => {
  if (selectedIndex === undefined) {
  setSelectedTab(index);
  }
  - if (onChange) onChange(index);
  - };
  + if (onChange && selectedIndex !== index) onChange(index);
  + },
  + [selectedIndex, onChange],
  + );
  useEffect(() => {
  if (selectedIndex !== undefined) {
  