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> );}