_blank is opened in new window on key press event – React.js

i want to open a tab when i press shift +enter on my react Application

so I’ve written the logic like this

function Apps() {
 const onKeyPressEventHandler = React.useCallback((event) => {
  if (event?.key === 'Enter' && event.shiftKey) {
   window.open('https://www.google.com/','_blank')
   return;
  }
 }, []);

 React.useEffect(() => {
  if (typeof document !== undefined) {
   document.addEventListener('keydown', onKeyPressEventHandler, false);
  }
  return () => {
   if (typeof document !== undefined) {
    document.removeEventListener('keydown', onKeyPressEventHandler, false);
   }
  };
 }, [onKeyPressEventHandler]);
 
 return (
  <div>
   HI
  </div>
 );

}

this opens a new window, but if I keep a window.open('https://www.google.com/','_blank') inside the use effect its works fine.

can anyone help me to achieve this?