Data is fetched and stored into redux but when accessing it comes undefined

I am making api call in my redux action creator storing those data into my redux state, but when trying to access that using useSelector getting undefined. Not able to understand where i am doing wrong. Any help here would be great. I am using redux toolkit. Attaching snipped for reducers, action creator, component, redux state snapshot from redux dev tools and debugging logs

Note: appID will come from path params but for now i am hardcoding it In my SuggestedAudience snipped if i comment out {app.name} which is causing the problem then my redux states are loaded correctly, snapshot attached

Observation: If i am making any changes to Suggested audience and saving then i am getting value but when reloading it 2-3 times again the error comes.

//apps slice to store apps
import { createSlice } from "@reduxjs/toolkit";
import _ from "lodash";

const appsSlice = createSlice({
  name: "apps",
  initialState: {},
  reducers: {
    appSuccess(state, action) {
      const apps = _.keyBy(action.payload.data, "uuid");
      return apps;
    },
  },
});

export const appsAction = appsSlice.actions;
export default appsSlice.reducer;

//ui-slice to store app data
import { createSlice } from "@reduxjs/toolkit";

const uiSlice = createSlice({
  name: "ui",
  initialState: { appId: null, orgId: null },
  reducers: {
    setAppId(state, action) {
      state.appId = action.payload;
    },
  },
});

export const uiAction = uiSlice.actions;
export default uiSlice.reducer;

//App.js
import logo from "./logo.svg";
import "./App.css";
import PageHeader from "./components/PageHeader";
import SuggestedAudiences from "./components/SuggestedAudiences";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { uiAction } from "./components/store/ui-slice";
import { appsAction } from "./components/store/apps-slice";
import { fetchApps } from "./components/store/apps-action";

function App() {
  const dispatch = useDispatch();

  const appID = "52f14657d6c765401a2d7d4-41dfb38a-4262-11e3-9166-005cf8cbabd8";

  useEffect(() => {
    dispatch(uiAction.setAppId(appID));
    dispatch(fetchApps());
  }, []);

  return (
    <>
      <PageHeader />
      <SuggestedAudiences />
    </>
  );
}

export default App;

//Suggested Audiences
import React, { useEffect } from "react";

import { fetchApps } from "./store/apps-action";
import { useDispatch, useSelector } from "react-redux";
import { uiAction } from "./store/ui-slice";

const SuggestedAudiences = (props) => {
  const dispatch = useDispatch();

  const appId = useSelector((state) => state.ui.appId);
  const app = useSelector((state) => state.apps[appId]);

  return (
    <>
      <div>Suggested Audiences 🚀</div>
      {app.name}
    </>
  );
};

export default SuggestedAudiences;