How to use the recompose.compose function in recompose

);

const enhacer: HOC<*, EnhancedCompProps> = compose(
  onlyUpdateForKeys(["eA"]),
  withProps(props => ({
    eA: (props.eA: number),
    // $ExpectError eA nor any nor string
    eAErr: (props.eA: string)
  })),
  withProps(props => ({
    // $ExpectError property not found
    err: props.iMNotExists
  }))
);

const enhacerErr: HOC<*, EnhancedCompProps> = compose(
  // $ExpectError property not found
  onlyUpdateForKeys(["eB"])
);

const EnhancedComponent = enhacer(Comp);

>
        {first}
        {second}
      
    );
  }
}

CheckBox.defaultProps = {};
Object.setPrototypeOf(CheckBox.defaultProps, defaultProps);

let CheckBoxDoc;
if (process.env.NODE_ENV !== 'production') {
  CheckBoxDoc = require('./doc').doc(CheckBox); // eslint-disable-line global-require
}
const CheckBoxWrapper = compose(
  withFocus(),
  withTheme,
  withForwardRef,
)(CheckBoxDoc || CheckBox);

export { CheckBoxWrapper as CheckBox };

[
                    
                ]}
        
     : null);
};

export default branch(
    ({focusedContent: {path} = {}}) => path,
    compose(
        defaultProps({
            isFocused: true,
            editMap: true
        }),
        withFocusedContentMap,
        connectMap,
        withSaveChanges,
        handleMapUpdate,
        handleToolbar,
        handleAdvancedMapEditor,
        withToolbar,
        withConfirmClose
    )
)(MapEditor);

&::after {
    margin-left: 13px;
    font-size: 1.5rem;
    content: '›';
    margin-top: -4px;
  }
`;

const AddIcon = styled(PlusIcon)`
  margin-top: 1px;
  margin-right: 4px;
  min-width: 1%;
  fill: ${({ theme }) => theme.tertiary};
`;

const enhance = compose(
  injectState,
  withTheme,
  withState('projectName', 'setProjectName', ''),
  withState('addingProject', 'setAddingProject', false),
  withState('billingGroups', 'setBillingGroups', []),
  withState('billingGroup', 'selectBillingGroup', null),
  lifecycle({
    async componentDidMount() {
      const { setBillingGroups } = this.props;
      getBillingGroups().then(bg => setBillingGroups(bg));
    },
  }),
);

const CavaticaAddProject = ({
  theme,

suggestions: Array,
  theme: Object,
};

const annotationFacets = [
  { title: 'Entity ID', field: 'entity_id', full: 'annotations.entity_id', doc_type: 'annotations', type: 'exact' },
  { title: 'Case UUID', field: 'case_id', full: 'annotations.case_id', doc_type: 'annotations', type: 'exact' },
  { title: 'Primary Site', field: 'project.primary_site', full: 'annotations.project.primary_site', doc_type: 'annotations', type: 'keyword' },
  { title: 'Project', field: 'project.project_id', full: 'annotations.project.project_id', doc_type: 'annotations', type: 'terms' },
  { title: 'Entity Type', field: 'entity_type', full: 'annotations.entity_type', doc_type: 'annotations', type: 'keyword' },
  { title: 'Annotation Category', field: 'category', full: 'annotations.category', doc_type: 'annotations', type: 'keyword' },
  { title: 'Annotation Created', field: 'created_datetime', full: 'annotations.created_datetime', doc_type: 'annotations', type: 'date' },
  { title: 'Annotation Classification', field: 'classification', full: 'annotations.classification', doc_type: 'annotations', type: 'keyword' },
];

export const AnnotationAggregationsComponent = compose(
  withState('annotationIdCollapsed', 'setAnnotationIdCollapsed', false)
)((props: TProps) => (
  <div>
    
    </div>

selectedLayer => ({selectedLayer})
        )
        , {
            selectGroup: selectLayer
        }
    )
);


const rangeEnhancer = compose(
    connect(() => ({}), {
        rangechangedHandler: onRangeChanged
    })
);

const enhance = compose(
    currentTimeEnhancer,
    playbackRangeEnhancer,
    layerSelectionEnhancer,
    customTimesHandlers,
    rangeEnhancer,
    layerData,
    defaultProps({
        key: 'timeline',
        options: {
            maxHeight: '90%',
            verticalScroll: true,
            stack: false,
            showMajorLabels: true,
            showCurrentTime: false,
            zoomMin: 10,
            zoomable: true,

{confirm}
        
      
    )}
  
);

StringArgInput.propTypes = {
  updateValue: PropTypes.func.isRequired,
  value: PropTypes.string.isRequired,
  confirm: PropTypes.string,
  commit: PropTypes.func.isRequired,
  argId: PropTypes.string.isRequired,
};

const EnhancedStringArgInput = compose(
  withProps(({ onValueChange, typeInstance, argValue }) => ({
    confirm: get(typeInstance, 'options.confirm'),
    commit: onValueChange,
    value: argValue,
  })),
  createStatefulPropHoc('value')
)(StringArgInput);

EnhancedStringArgInput.propTypes = {
  argValue: PropTypes.any.isRequired,
  onValueChange: PropTypes.func.isRequired,
  typeInstance: PropTypes.object.isRequired,
};

export const string = () => ({
  name: 'string',

currentPage={isNaN(parseInt(page - 1, 10)) ? 0 : parseInt(page - 1, 10)}
        />
      
    ) : null }
    <style>{` 
          .wrap { 
            padding: 10px;
            max-width: 1024px;
            margin: auto; 
            margin-top: 30px;
          }
    `}</style>
  
)

export default compose(
    graphql(gql`
        ${PlantGridList.fragments.plantList}
        query ($categories: [CategoryEnum], $skip: Int) {
            findByCategory(categories: $categories, skip: $skip) {
              result {
                ...PlantGridList
              }
              count
            }
        }
    `, {
      options: ({ category, url: { query: { page } } }) =&gt; {
        let skip = 0
        if (page &gt; 0) {
          skip = page ? parseInt(page - 1, 10) * 20 : 0
        }

styles.list,
                styles[`list__${type}`],
              )}>
              {
                types[type].map((Preview, index) => )
              }
            
          
        )}
      
    )
  }
  
);

export const Menu = compose(
  getContext({ dragingItem: object }),
  withState('active', 'setActive', false),
  withState('visible', 'setVisible', false),
  withHandlers({
    onChange: props => key => props.setActive(key),
    hideList: props => () => props.setVisible(false),
    showList: props => () => props.setVisible(true),
    toggleMenu: props => (e) => {
      e.preventDefault();
      return props.setVisible(!props.visible);
    }
  }),
  lifecycle({
    componentWillReceiveProps(next) {
      if (!next.dragingItem.equals(this.props.dragingItem)) {
        this.props.setVisible(false);