When I try and destructure my data using useSelector, I get the error backgroundImage undefined.

I am setting my initial state in my reducer. How can I stop the error occurring?

component:

export const SampleScreen = (props) => {
  const { navigation } = props;

  const {
    rescueMe: {
      rescueMeSplashScreen: {
        backgroundImage, // error undefined
        buttonText,
        informationText,
        title: pageTitle,
      },
    },
  } = useSelector((state) => state);


  return (
    <>

    </>
  );
};

Reducer:

const RescueMeReducer = (
  state = {
    rescueMeSplashScreen: {
      backgroundImage: "",
      buttonText: "",
      informationText: "",
      title: "",
    },
    lastKnownPosition: undefined,
    error: undefined,
    loading: false,
  },
  action
) => {
  switch (action.type) {
    ...
    case RESCUE_ME_CONTENT: {
      return {
        ...state,
        error: undefined,
        rescueMeSplashScreen: undefined,
        loading: true,
      };
    }
    case RESCUE_ME_CONTENT_SUCCESS: {
      return {
        ...state,
        rescueMeSplashScreen: action.payload,
        loading: false,
      };
    }
    case RESCUE_ME_CONTENT_FAILED: {
      return {
        ...state,
        rescueMeSplashScreen: undefined,
        error: {
          errorMessage: action.payload,
        },
        loading: false,
      };
    }
    default:
      return state;
  }
};

export default RescueMeReducer;