Untitled

import React from 'react';

export function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const popUpRef = React.useRef();
  
  React.useEffect(() => {
    if (isOpen) {
      popUpRef.current.focus();
    }
  }, [isOpen]);

  return (
    <div className='App'>
      <button
        onClick={() =>setIsOpen(true)}
      >
        click me
      </button>
      {isOpen && (
        <div
          tabIndex={-1}
          ref={popUpRef}
          onBlur={() => setIsOpen(false)}
          className='pop-up'
        >
          Hi i'm a beautifull pop-up
        </div>
      )}
    </div>
  );
}