Recompose - mapProps and withProps not updating prop

Question

I have a container that I'd like to manage the roster sort order, direction and a gender filter. I have tried both withProps and mapProps in the current withProps code below, the roster gets updated correctly inside of withProps, but it doesn't override the existing roster in the Wrestlers component

import { compose, withState, withProps, withHandlers } from "recompose"
import { connect } from "react-redux"
import sortBy from "lodash/sortBy"


// container
export default compose(
  withState("male", "toggleGender", true),
  withState("sortByName", "toggleSortByName", true),
  withState("order", "toggleOrder", true),
  withHandlers({
    toggleGender: ({ toggleGender, male, }) => () => toggleGender(!male),
    toggleSortByName: ({ toggleSortByName, sortByName, }) => () =>
      toggleSortByName(!sortByName),
    toggleOrder: ({ toggleOrder, order, }) => () => toggleOrder(!order),
  }),
  connect(state => ({
    roster: state.roster,
  })),
  withProps(props => {
    const { roster, toggleOrder, male, sortByName, } = props

    let newRoster = Object.assign([], roster)

    newRoster = newRoster.filter(wrestler => wrestler.male === male)

    if (toggleOrder) {
      newRoster = newRoster.reverse()
    }

    newRoster = sortBy(newRoster, sortByName ? "name" : "points")

    return {
      roster: newRoster,
      ...props,
    }
  })
)(Wrestlers)

Answer 1

Well that was silly, I needed to change the order of the return, I also fixed the some other minors

import { compose, withState, withProps, withHandlers } from "recompose"
import { connect } from "react-redux"
import sortBy from "lodash/sortBy"

import Wrestlers from "./wrestlers"

export default compose(
  withState("male", "toggleGender", true),
  withState("sortByName", "toggleSortByName", true),
  withState("order", "toggleOrder", true),
  withHandlers({
    toggleGender: ({ toggleGender, male, }) => () => toggleGender(!male),
    toggleSortByName: ({ toggleSortByName, sortByName, }) => () =>
      toggleSortByName(!sortByName),
    toggleOrder: ({ toggleOrder, order, }) => () => toggleOrder(!order),
  }),
  connect(state => ({
    roster: state.roster,
  })),
  withProps(props => {
    const { roster, order, male, sortByName, } = props

    let newRoster = Object.assign([], roster)

    newRoster = newRoster.filter(wrestler => wrestler.male === male)

    newRoster = sortBy(newRoster, sortByName ? "name" : "points")

    if (order) {
      newRoster = newRoster.reverse()
    }

    return {
      ...props,
      roster: newRoster,
    }
  })
)(Wrestlers)