How can I filter data in a react redux app gotten from an api

Question

I am fetching data from an API and displaying it in NearestRides component(it gives a nested object). I need to filter the data based on state or city selected in a my filtered Component, so it can display only data that matches state or city selected. I keep getting cannot read properties of undefined. I feel the issue is either Redux accessing the data or filter function, but i dont really know

this is my reduxreducer

import { actionTypes } from "../constants/action-types";

const initialState={
    ridesDetails:[]
}

export const ridesReducer=(state=initialState,{type,payload})=>{
        switch (type) {
            case actionTypes.SET_RIDES:
                return {...state, ridesDetails:payload}

            case actionTypes.SELECT_RIDE_STATE:
                const filterRide= state.allRides.rideDetails.filter(ride=>ride.state===payload && ride)
                state= filterRide
                return state;
             
            default:
                return state
        }

}

this is my filterjs component

      let rides = useSelector(state=>state.allRides.ridesDetails)

  console.log(rides)

  const dispatch = useDispatch()

  const handleChange=((e)=>{
      e.preventDefault()
      console.log("yap this happened")
     let selected_State=e.target.value
      console.log(selected_State)

      dispatch(selectState(selected_State))
    })
    

    function closeModal() {
      setIsOpen(false);
    }
  return (
     <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
        className=" text-white p-5 rounded-xl mt-6 mb-0 ml-auto mr-3"
        style={customStyles}
      >
        <div className="flex justify-between mb-2">
          <h2 className="text-xl">Filters</h2>
          <button className="text-3xl" onClick={closeModal}><AiOutlineCloseCircle/></button>
        </div>
        <hr></hr>
        <form className="text-xl">
          <div>
          <select className=" bg-[#6a6c6d] text-white  h-10 my-3 w-full"  onChange={handleChange}>
              <option value="">State</option>
              {rides.filter(function(item){
                return rides.indexOf(item.state)>-1;
              }) }
              {rides.map((ride,id)=>(
                  <option key={id} value={ride.state}>{ride.state}</option>
              ))}
          </select>
          <select className=" bg-[#6a6c6d] text-white h-10 my-3 w-full">
              <option value="">City</option>
              {rides.filter(function(item){
                return rides.indexOf(item.city)>-1
              })}
              {rides.map((ride,id)=>(
                      <option key={id}  onClick={()=>console.log(ride.city)} value={ride.city}>{ride.city}</option>
              ))}
          </select>
          </div>
        </form>
      </Modal>
  )
}

this is my nearestRide.js component

    <div>
      {user && 
        <div>{rides.map((ride)=>
  (
      <div className="flex bg-[#111] text-white my-3"key={ride.id} >
          <div className="card bg-[#111] m-4 rounded-xl">
                <div className="flex">
                    <div className="imageBox">
                        <img  className="rounded" src={ride.map_url} alt="" />
                    </div>
                    <div className="contentBox mx-3">
                      <p className="my-2">{ride.state}</p>
                        <p className="my-2">Ride id: {ride.id}</p>
                        <p className="my-2">Origin Station: {ride.origin_station_code}</p>
                        <p className="my-2">Origin Path: {JSON.stringify(ride.station_path)}</p>
                        <p className="my-2">Date: {ride.date}</p>
                        <p className="my-2">Distance: {Math.min(...ride.station_path.map(a => Math.abs(a-user.station_code)))}</p>
                    </div>
                </div>
          </div>
      </div> 
    )
  )}</div>}
   )

this is my ridesaction.js

    import { actionTypes } from "../constants/action-types"

export const setRides =(allrides)=>{
    return {
        type:actionTypes.SET_RIDES,
        payload:allrides,
    }
}

export const selectCity =(city_selected)=>{
    return {
        type:actionTypes.SELECT_RIDE_CITY,
        payload:city_selected,
    }
}
export const selectState =(state_selected)=>{
    return {
        type:actionTypes.SELECT_RIDE_STATE,
        payload:state_selected,
    }
}

this is my actiontypes.js

    export const actionTypes={
    SET_RIDES:"SET_RIDES",
    SELECT_RIDE_STATE:"SELECT_RIDE_STATE",
    SELECT_RIDE_CITY:"SELECT_RIDE_STATE"
}

and this is my cominedreducer function

        import { ridesReducer } from "./ridesReducer";
import { combineReducers } from "redux";

export const reducers=combineReducers({
    allRides:ridesReducer,
})