I am using react and redux to display a list of items, when a user clicks on view more, they should be redirected to another page where they get to view information on the single item. The id gets passed correctly , but unfortunately, all the items in the list are returned instead of a single item. What i am doing wrong, any advice or recommendations on how i can go about dispatching an action with a parameter onclick will be appreciated.

My action looks like this :

//get specific worker
export const getWorker = (id) => {
    return function (dispatch, getState) {
        axios.get(`/worker/${id}`, tokenConfig(getState))
            .then(res => dispatch({ type: WORKER_PROFILE_SUCCESS, payload: res.data.data })
            )
            .catch(error => dispatch(setError(error.response.data, error.response.status)))
    }
}

My list looks like this :

const mapStateToProps = state => {
  return {
    data: state.items
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getServiceProviders: () => dispatch(getServiceProviders())
  }
}

function ServiceProvidersList({ data, getServiceProviders }, props) {
  const { classes } = props;

  let history = useHistory();

  useEffect(() => {
    getServiceProviders();
  }, []);

  const handleClick = (id) => e => {
    console.log("here", id);
    history.push(`/admin/service-provider/${id}`);
  }

  return (
    <div>

      {data.isLoading ? (
        <h2> Loading... </h2>
      ) : (
        <GridContainer>

              {data.items && data.items.length > 0 && data.items.map(item => {
                return (
                  <Grid container spacing={3}>
                    <Grid item xs={12} sm={10}>
                      <Card className="card" key={item.id} onClick={handleClick(item.id)}>
                        <CardHeader color="primary"> {item.user.first_name} {item.user.last_name} </CardHeader>
                      </Card>
                    </Grid>
                  </Grid>
                )
              })}
        </GridContainer>
      )}
    </div>
  )}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(ServiceProvidersList));