React Semantic UI Всплывающее окно было скрыто, когда «щелчок мышью внутри, но релиз снаружи» блока Popup

Question

Всплывающее окно React Semantic UI было скрыто во время «щелчка мышью внутри, но отпускаем снаружи» блока Popup.

Я создаю всплывающий компонент входа в React с помощью всплывающего окна React Semantic UI.Я использую «События, запускающие всплывающее окно при нажатии».Когда я пытался скопировать содержимое во всплывающем блоке, всплывающее окно было закрыто, когда моя мышь вышла за пределы всплывающего окна.

import React, { Component } from 'react';
import { Button, Message, Popup, Icon, Menu } from 'semantic-ui-react';

// code inside of render return function
<Popup trigger={<Button icon>LOGIN</Button>}
       on='click'
       className='login-popup'
>
       <div className='popup-main'>
              <Message attached='bottom'>
                        Log In
              </Message>
              <LoginForm
                  {...this.props}
              />
        </div>

        <Message attached='bottom'>
              Don't have account? Signup instead.
        </Message>
</Popup>

Я бы хотел оставить всплывающее окно открытым, если пользователь не щелкнет мышью за пределами всплывающего окна.Если пользователь щелкнул мышью внутри всплывающего окна, всплывающее окно не следует закрывать даже при отпускании мыши за его пределами.