How to use the react-onclickoutside function in react-onclickoutside

changeCategoryEditMode: _ => dispatch({ type: "CATEGORY_EDITMODE" }),
  addCategory: _ => dispatch(addCategory(_)),
  addNote: (..._) => dispatch(noteSubmit(..._)),
  starChange: _ => dispatch(starFilter()),
  lockChange: _ => dispatch(lockFilter(_)),
  editorReset: _ => dispatch({ type: "RESET_EDITOR" }),
  noteChange: _ => dispatch(noteChange(_)),
  titleChange: _ => dispatch(titleChange(_))
});

// @ts-ignore
export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(onClickOutside(MainForm))
);

return _.find(
      this.props.fields,
      op => op.title === filter.field || op.label === filter.field
    ).name
  }
}
Search.propTypes = {
  fields: PropTypes.object,
  onSearch: PropTypes.func,
  indexedFields: PropTypes.array,
}
Search.contextTypes = {
  intl: PropTypes.object.isRequired,
}

export default onClickOutside(Search)

);
          })
        }
      
    );
  }
}

let mapStateToProps = state => {
  return {
    currentDescFont: state.currentDescFont,
    locale: state.locale,
    currentDescFontSelected: state.currentDescFontSelected
  }
}
export default connect(mapStateToProps)(onClickOutside(DropDownFontSelectorMenu));

'size',
  'color',
  'font',
  'link',
  'image',
  'video',
  'width',
  'height',

  'table',
  'contain',
  'tr',
  'td'
];

export default onClickOutside(Editor);

id={item.id}
                disabled={this.state.disabled}
                tagName="span"
                html={item.title}
                onBlur={this.handleBlur}
                onChange={e => this.props.renameItem(item.id, e.target.value)}
              />
            
          )}
        
      
    );
  }
}

export default onClickOutside(Item);

<li>{datas[key]}</li>
              )
            }
          
        }
      
    );
  }
}

Choices.propTypes = {
  fetchTracks: PropTypes.func.isRequired,
  activeChoiceId: PropTypes.string,
};

export default onClickOutside(Choices);

);
   }
   return (
     <section>
       <button>
         <i></i>
       </button>
       {boardSharingModal}
     </section>
   );
 }
}


export default onClickOutside(BoardSharingDropdown);

return (
      <div>
        {this.renderModal()}
      </div>
    );
  }
}

Modal.propTypes = {
  dispatch: PropTypes.func.isRequired,
  playlists: PropTypes.array.isRequired,
  song: PropTypes.object.isRequired,
  authenticated: PropTypes.bool.isRequired,
};

export default onClickOutside(Modal);

Account Settings
          My Guidebook
          Gift Cards
          Business Travel
          Log Out

        
      
    )

  }


}

export default onClickOutside(UserSettingsDropdown);

<button> Create </button>
                          
                         );
   }
   return (
     <section>
       <button>
         <i></i>
       </button>
       {createBoardModal}
     </section>
   );
 }
}

export default onClickOutside(CreateBoardDropdown);