I have one flyout that listens to the onClick event to open to a new tab then close it. When I bypass the onClick function onClickOption as props, it is working but when I set it up as onClick inline callback function, the flyout is not close after clicking any <li>. anyone may know why? codebox

import './styles.css';
import React, { FC, useRef, useState } from 'react';
import Flyout from './Flyout';
interface OptionPanelProps extends React.HTMLAttributes<HTMLElement> {}

const noOp = (): void => void 0;

export const OptionPanel: FC<OptionPanelProps> = () => {
  const openNewTab = (): void => {
    window?.open(`google.com`, '_blank');
  };
  return (
    <div>
      <ul>
        <li onClick={() => openNewTab()}>1</li>
        <li onClick={() => openNewTab()}>2</li>
        <li onClick={() => openNewTab()}>3</li>
      </ul>
    </div>
  );
};

export const OptionFlyout: FC = () => {
  const [isFlyoutOpen, toggleFlyout] = useState(false);
  const anchorRef = useRef < HTMLButtonElement > null;

  const closeFlyout = (): void => {
    toggleFlyout(false);
  };

  return (
    <div className="recentSearch" data-tn="recentSearch-flyout">
      <button ref={anchorRef}>Option Menu</button>
      <Flyout
        anchor={anchorRef.current}
        isOpen={isFlyoutOpen}
        onDismiss={closeFlyout}>
        {isFlyoutOpen && <OptionPanel onClick={() => closeFlyout()} />}
      </Flyout>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <OptionFlyout />
    </div>
  );
}