Tengo un control flotante que escucha el evento onClick para abrir una nueva pestaña y luego cerrarlo. Cuando omito la función onClick onClickOption como accesorios, funciona, pero cuando la configuro como la función de devolución de llamada en línea onClick, el control flotante no se cierra después de hacer clic en cualquier <li> . alguien puede saber porque? caja de código

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