How to use the terra-hookshot.attachmentBehaviors function in terra-hookshot

);

    return (
      /* eslint-disable jsx-a11y/no-static-element-interactions */
      <div>
        <div>
          <label>Attachment Behavior</label>
        </div>
        <select value="{this.state.hookshotAttachmentBehavior}" name="hookshotAttachmentBehavior" id="{getId('hookshotAttachmentBehavior')}">
          {generateOptions(Hookshot.attachmentBehaviors)}
        </select>
        <br>
        <br>
        
        <div>
          <label>Content Attachment</label>
        </div>
        </div>

'top center',
  'top right',
  'middle left',
  'middle center',
  'middle right',
  'bottom left',
  'bottom center',
  'bottom right',
];

const propTypes = {
  /**
   * If the primary attachment in not available, how should the content be positioned. Options
   * include 'auto', 'flip', or 'none'.
   */
  attachmentBehavior: PropTypes.oneOf(Hookshot.attachmentBehaviors),
  /**
   * The children to be displayed as content within the popup.
   */
  children: PropTypes.node.isRequired,
  /**
   * Callback function indicating a close condition was met, should be combined with isOpen for state management.
   */
  onRequestClose: PropTypes.func.isRequired,
  /**
   * Target element for the popup to anchor to.
   */
  targetRef: PropTypes.func.isRequired,
  /**
   * Bounding container for the popup, will use window if no value provided.
   */
  boundingRef: PropTypes.func,

constructor(props) {
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleAttachementBehaviorChange = this.handleAttachementBehaviorChange.bind(this);
    this.handleContentAttachmentChange = this.handleContentAttachmentChange.bind(this);
    this.handleTargetAttachmentChange = this.handleTargetAttachmentChange.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      isOpen: false,
      hookshotContentAttachment: ATTACHMENT_POSITIONS[1],
      hookshotTargetAttachment: ATTACHMENT_POSITIONS[7],
      hookshotAttachmentBehavior: Hookshot.attachmentBehaviors[0],
      hookshotAttachmentMargin: 0,
    };
  }

);

    return (
      <div>
        <div>
          <label>Attachment Behavior</label>
        </div>
        <select value="{this.state.hookshotAttachmentBehavior}" name="hookshotAttachmentBehavior" id="{getId('hookshotAttachmentBehavior')}">
          {generateOptions(Hookshot.attachmentBehaviors)}
        </select>
        <br>
        <br>
        
        <div>
          <label>Content Attachment</label>
        </div>
        </div>

constructor(props) {
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleAttachementBehaviorChange = this.handleAttachementBehaviorChange.bind(this);
    this.handleContentAttachmentChange = this.handleContentAttachmentChange.bind(this);
    this.handleTargetAttachmentChange = this.handleTargetAttachmentChange.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.setParentNode = this.setParentNode.bind(this);
    this.getParentNode = this.getParentNode.bind(this);
    this.state = {
      isOpen: false,
      hookshotContentAttachment: ATTACHMENT_POSITIONS[1],
      hookshotTargetAttachment: ATTACHMENT_POSITIONS[7],
      hookshotAttachmentBehavior: Hookshot.attachmentBehaviors[0],
      hookshotAttachmentMargin: 0,
    };
  }

constructor(props) {
    super(props);
    this.handleRegionClick = this.handleRegionClick.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.setParentNode = this.setParentNode.bind(this);
    this.getParentNode = this.getParentNode.bind(this);
    this.handleAttachementBehaviorChange = this.handleAttachementBehaviorChange.bind(this);
    this.handleContentAttachmentChange = this.handleContentAttachmentChange.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      isOpen: false,
      coordinates: undefined,
      hookshotContentAttachment: ATTACHMENT_POSITIONS[1],
      hookshotAttachmentBehavior: Hookshot.attachmentBehaviors[0],
      hookshotAttachmentMargin: 0,
    };
  }

);

    return (
      <div>
        <div>
          <label>Attachment Behavior</label>
        </div>
        <select value="{this.state.hookshotAttachmentBehavior}" name="hookshotAttachmentBehavior" id="{getId('hookshotAttachmentBehavior')}">
          {generateOptions(Hookshot.attachmentBehaviors)}
        </select>
        <br>
        <br>
        
        <div>
          <label>Content Attachment</label>
        </div>
        </div>