Reverse Tabbing in React Modal not working

Question

After opening a React Modal, I provided a shard to FocusLock so that it consider some outside element in the focus loop. Forward tabbing is working fine, Reverse Tabbing is not working when it reaches an outside element.

<ReactModal
            {...this.props}
            isOpen={isOpen}
            className={classNames('lessonModalDisplay', className)}
            overlayClassName={classNames('lessonModalOverlay', overlayClassName)}
            shouldCloseOnOverlayClick={true}
            shouldCloseOnEsc={true}
            ref={this._modalRef}
          >
            <FocusLock
              disabled={false}
              returnFocus={true}
              shards={[this._closeBtnRef]}
            >
              {children}
            </FocusLock>
</ReactModal>