Как сопоставить массив внутри объекта в Redux React?

Я использую React и redux-toolkit для фронтенд-разработки. Когда я пытаюсь отобразить(), массив внутри объекта весь экран становится пустым. Это структура данных, которую я получаю из состояния редукции. изображение структуры данных Это экран, на котором я вызываю состояние из хранилища избыточности:

const { id } = useParams();
  const { mocktest, isLoading, isError, message } = useSelector(
    (state) => state.mocktest
  );
  console.info(mocktest);
useEffect(() => {
    if (isError) {
      toast.error(message);
    }
    dispatch(getMockTestById(id));
  }, [isError, message, dispatch, id]);

Это мой кусочек:

export const getMockTestById = createAsyncThunk(
  'mocktest/getMockTestById',
  async (id, thunkAPI) => {
    try {
      // const token = thunkAPI.getState().auth.user.token;
      return await mockTestServices.getMockTestById(id);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) 
        error.message 
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

Вот как я пытаюсь отобразить() или получить доступ к данным:

{mocktest.questionSet.map((qSet) => (
                    <h4 className = "text-center">{qSet.setName}</h4>
                  ))}

Это то, что я ожидал, что setName будет отображаться в теге h4 Я также попытался добавить this.props.

Вот CodeSandBox заданных сценариев