React and Redux: Error Cannot read property 'filter' of undefined

When I type something in the input field, I get the following error: Cannot read property 'filter' of undefined. When I console.log it, right after the error, I can see that data is successfully stored in the reducer state peopleList array. So why then am I getting the error when I call filter in my react app below?

Update As Konstantin mentioned in the comments below, both my object and function had the same name which was searchPeople. I changed the function name and it successfully worked.

//React app
class SearchPeople extends Component{

  state = {
    searchArray: []
  };


    static propTypes = {
      searchPeople: PropTypes.object.isRequired,
      error: PropTypes.object.isRequired,
      searchPeople: PropTypes.func.isRequired
    };

handleOnKeyUp = (e) =>{

  const {peopleList} = this.props.searchPeople

  let userData = e.target.value; //When user enters data into input field

  if(userData){
    this.props.searchPeople(userData)

      this.setState({
        searchArray: peopleList.filter((data) =>{
          return data.name.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase())
        })
      })
  }
  
};
    render(){
      let {searchArray} = this.state


      return(
        <div id= "search-people" className="TopNavbarSearchMainContainer">
          <div className="SearchInputContainer">
            <input type="text" className="TopNavbarSearchBar" placeholder="Search People" 
 spellCheck="false" onKeyUp={this.handleOnKeyUp}/>
            <div className="InstantSearchResultsContainer">
            {this.renderSearchResults()}
         </div>
      </div>
     </div>
)}
};
const mapStateToProps = state => ({
  searchPeople: state.searchPeople,
  error: state.error
});
const mapActionsToProps = {
  searchPeople
};

export default connect(mapStateToProps, mapActionsToProps)(SearchPeople);

//Redux reducer
const initialState = {
  peopleList: [],
  isLoading: false,
  postsPerPage: 15
};

//eslint-disable-next-line
export default function(state = initialState, action){
  switch(action.type){
    case LOADING_DATA:
      return{
        ...state,
        isLoading: true
      };
    case UPDATE_SEARCH_PEOPLE_LIST:
      return{
        ...state,
        peopleList: action.payload,
        isLoading: false
      };
    default:
      return state;
  }

}

//Action functions/types
export const searchPeople = (data) => ({
  type: SEARCH_PEOPLE,
  payload: data
});

export const updateSearchPeopleList = (data) => ({
  type   : UPDATE_SEARCH_PEOPLE_LIST,
  payload: data
});

//Search People Middleware
export const getSearchPeopleFlow = ({getState, dispatch}) => next => action => {
  next(action);
  if (action.type === SEARCH_PEOPLE) {
    const URL = `/api/user/findUserByName/${action.payload}`;
    dispatch(apiGetRequest(URL, setAuthorizationHeader(getState), null, SEARCH_PEOPLE_SUCCESS, SEARCH_PEOPLE_ERROR));
dispatch(loadingData())
  }
};

// on successful fetch, process the search people data
export const processSearchPeopleCollection = ({dispatch}) => next => action => {
  next(action);

  if (action.type === SEARCH_PEOPLE_SUCCESS) {
console.log(action.payload)
    dispatch(updateSearchPeopleList(action.payload.data.user));
  }
};

//apiGetRequest Middleware
export const getApi = ({dispatch, getState}) => next => action => {

  if(action.type === GET_API_REQUEST) {
    const {url, config, onSuccess, onError } = action.meta;

    axios.get(url, config)
      .then((data) => {dispatch({ type: onSuccess, payload: data})})
      .catch(error => dispatch({ type: onError, payload: error }))
  }
}