How to use focus-trap-react - 1 common examples

/**
    By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's <div> to receive focus if the popover's content includes no tabbable elements. Make sure the fallback element has a negative tabindex so it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
    escapeDeactivates {boolean}: Default: true. If false, the Escape key will not trigger deactivation of the focus trap. This can be useful if you want to force the user to make a decision instead of allowing an easy way out.
  */
  fallbackFocus: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]), //

  /** Default: false. If true, a click outside the focus trap will deactivate the focus trap and allow the click event to do its thing. */
  clickOutsideDeactivates: PropTypes.bool,

  /** Default: true. If false, when the trap is deactivated, focus will not return to the element that had focus before activation. */
  returnFocusOnDeactivate: PropTypes.bool,

  children: PropTypes.node.isRequired,
};

const defaultProps = FocusTrapLibrary.defaultProps;

// shell component for enhancing UXDeveloper
export default function FocusTrap(props) {
  // internal use
  const { focusTrapOptions } = props; // eslint-disable-line
  return {props.children};
}

FocusTrap.propTypes = propTypes;
FocusTrap.defaultProps = defaultProps;
FocusTrap.displayName = "SidePanel.FocusTrap";
</div>