How to use the recompose.withProps function in recompose

(eA: string)
    }
  ;

const enhacer: HOC<*, EnhancedCompProps> = compose(
  withContext({}, props => {
    // $ExpectError eA nor any nor string
    (props.eA: string);
    return {};
  }),
  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 EnhancedComponent = enhacer(Comp);

orderBy: ['createdAt', 'desc'],
      limit: 3,
      storeAs: `recentActions-${projectId}`
    }
  ]),
  // Map redux state to props
  connect(({ firebase, firestore }, { projectId }) => ({
    displayNames: get(firebase, 'data.displayNames'),
    recentActions: get(firestore, `ordered.recentActions-${projectId}`),
    environments: get(firestore, `data.environments-${projectId}`)
  })),
  // Show a loading spinner while actions are loading
  spinnerWhileLoading(['recentActions']),
  // Render NoRecentActions component if no recent actions exist
  renderWhileEmpty(['recentActions'], NoRecentActions),
  withProps(({ recentActions, displayNames, environments }) => ({
    orderedActions: map(recentActions, event => {
      const createdBy = get(event, 'createdBy')
      const envLabelFromEnvironmentValIndex = (envIndex = 0) => {
        const envKey = get(event, `eventData.environmentValues.${envIndex}`)
        const envName = get(environments, `${envKey}.name`)
        const envUrl =
          get(environments, `${envKey}.databaseURL`) ||
          get(event, `eventData.inputValues.${envIndex}.databaseURL`, '')
        const firebaseProjectName = databaseURLToProjectName(envUrl)
        return `${envName} (${firebaseProjectName})`
      }
      if (createdBy) {
        return {
          ...event,
          src: envLabelFromEnvironmentValIndex(0),
          dest: envLabelFromEnvironmentValIndex(1),

const accountProp = (propName, def) => R.pathOr(def, ['category', propName]);

const enhance = compose(

  connect(null, categoriesOperations),

  defaultProps({
    onClear: () => null,
    icon: {
      name: 'attach-money',
      size: dimensions.iconSize,
    },
  }),


  withProps({ icons }),
  withProps(({ navigation }) => ({ category: getParam('category')(navigation) })),
  withProps(({ category, createCategory, updateCategory }) => ({
    submit: category ? updateCategory : createCategory,
  })),
  withState('icon', 'setIcon', accountProp('icon', icons[0])),
  withState('name', 'setName', accountProp('name')),
  withState('type', 'setType', accountProp('type', null)),
  withState('isPickerVisible', 'setPickerVisible', false),
  withHandlers({
    togglePicker: ({ isPickerVisible, setPickerVisible }) => () => {
      setPickerVisible(!isPickerVisible);
    },
    onChangeIcon: ({ setPickerVisible, setIcon }) => (value) => {
      setIcon(value);
      setPickerVisible(false);
    },

),
    };
  },
);

const ExecutionSelector = withProps(({ getExecution, selectedTaskId }) => {
  const execution = getExecution(selectedTaskId);
  return {
    xtermInstance:
      execution != null && execution.task.strategy.type === "terminal"
        ? execution.terminal
        : undefined,
  };
});

const TerminalSelector = withProps(({ getTerminalExecution, selection }) => {
  if (selection && selection.mode && selection.mode.type === "free-terminal") {
    const execution = getTerminalExecution(selection.mode.id);
    return {
      xtermInstance: execution != null ? execution.terminal : undefined,
    };
  } else return {};
});

const TaskChangeHandler = withProps(({ setSelectedTaskId }) => ({
  onTaskClick: (task: Task) => setSelectedTaskId(task.id),
}));

const TerminalsEventsHandler = lifecycle({
  onTerminalsChange(e) {
    if (e.type === "added") {
      this.props.setSelection({

action: 'create',
  })),
)(SetActionButton);

export const CreateExploreSsmSetButton = compose(
  withSetAction,
  withProps(() => ({
    type: 'ssm',
    scope: 'explore',
    action: 'create',
  })),
)(SetActionButton);

export const CreateRepositoryCaseSetButton = compose(
  withSetAction,
  withProps(() => ({
    type: 'case',
    scope: 'repository',
    action: 'create',
  })),
)(SetActionButton);

export const AppendExploreGeneSetButton = compose(
  withSetAction,
  withProps(() => ({
    type: 'gene',
    scope: 'explore',
    action: 'append',
  })),
)(SetActionButton);

export const AppendExploreCaseSetButton = compose(

isRemoving: templates.isRemoving,
    error: templates.error,
    currentUser: loadUser.user,
    isAdmin: _.intersection(loadUser.user.roles, powerUserRoles).length !== 0
  }
}

const mapDispatchToProps = {
  loadProjectsMetadata,
  deleteProductTemplate,
  createProductTemplate,
  updateProjectsMetadata,
}

const page500 = compose(
  withProps({code:500})
)
const showErrorMessageIfError = hasLoaded =>
  branch(hasLoaded, renderComponent(page500(CoderBot)), t => t)
const errorHandler = showErrorMessageIfError(props => props.errorTemp)
const enhance = spinnerWhileLoading(props => !props.isLoading && !props.isRemoving)
const ProductTemplateDetailsWithLoaderEnhanced = enhance(errorHandler(ProductTemplateDetails))
const ProductTemplateDetailsWithLoaderAndAuth = requiresAuthentication(ProductTemplateDetailsWithLoaderEnhanced)

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProductTemplateDetailsWithLoaderAndAuth))

<div>{item}</div>
        ))
      }
    
  );
};

const withSelectedQuery = compose(
  withState('selectedQueryId', 'setSelectedQueryId'),
  withHandlers({
    setSelectedQuery: ({ setSelectedQueryId }) =&gt; (model) =&gt; {
      const modelId = model ? model.get('_id') : null;
      setSelectedQueryId(modelId);
    }
  }),
  withProps(({ selectedQueryId }) =&gt; ({
    id: selectedQueryId,
    schema: 'query'
  })),
  withModel,
  withProps(({ model }) =&gt; ({ selectedQuery: model }))
);

const enhance = compose(
  withStyles(styles),
  setPropTypes({
    onQueryChange: PropTypes.func,
    query: PropTypes.instanceOf(Map)
  }),
  withSelectedQuery,
  withHandlers({
    updateSelectedQuery: ({ query, updateModel }) =&gt; (e) =&gt; {

import classNames from 'class-names'
import LazyLoad from 'react-lazyload'

import style from './style.scss'

export default compose(
  setDisplayName('IconCarousel'),
  setPropTypes({
    items: PropTypes.arrayOf(PropTypes.shape({
      key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
      label: PropTypes.node.isRequired,
      iconUrl: PropTypes.string.isRequired,
      link: PropTypes.string.isRequired,
    })).isRequired,
  }),
  withProps({
    refs: {
      wrapper: React.createRef(),
      carousel: React.createRef(),
      leftArrow: React.createRef(),
      rightArrow: React.createRef(),
      firstIcon: React.createRef(),
    }
  }),
  withState('shiftAmount', 'setShiftAmount', 0),
  withHandlers(({ refs, setShiftAmount }) => {
    const getWidth = (elem) => (elem && elem.getBoundingClientRect().width) || 0

    function shiftIcons(shiftAmount, right) {
      const carouselWidth = getWidth(refs.carousel.current)
      const wrapperWidth = getWidth(refs.wrapper.current)
      const leftArrowWidth = getWidth(refs.leftArrow.current)

{
          op: 'in',
          content: { field: 'ssms.consequence.transcript.consequence_type', value: filteredConsequenceTypes },
        },
      ],
    }, props.currentFilters);

    return {
      ...props,
      title: title || `${cases} Most Mutated Cases and Top ${genes} Mutated Genes`,
      impacts: impacts || (currentImpacts && currentImpacts.content.value) || [],
      filteredConsequenceTypes,
      currentFilters,
    };
  }),
  withProps({
    oncoGridHeight: 150,
    oncoGridPadding: 306,
    oncoGridWrapper: null,
    async getQueries(
      {
        oncoGrid,
        setOncoGrid,
        setOncoGridData,
        oncoGridPadding,
        oncoGridHeight,
        setIsLoading,
        projectId,
        setHeatMapMode,
        setShowGridLines,
        setCrosshairMode,
        setTrackLegends,