Почему js выдает ошибку TypeError: Cannot read properties of undefined (reading '0')?

Здравствуйте, помогите пожалуйста. Я пишу на React и использую Mobx вместо redux toolkit. У меня есть страница логина и страница пользователя. Когда пользователь авторизовывается или регистрируется его перекидывает на его страницу с чатами, где есть такой компонент: Servers. В этом компоненте мапится список чатов пользователя и выводятся его чаты. Но возникает ошибка то что нет такого списка, хотя я поставил условный рендеринг на то, есть ли список чатов. Помогите пожалуйста

Ошибка: Uncaught TypeError: Cannot read properties of undefined (reading '0')

store.ts

 
import { makeAutoObservable } from 'mobx' 
import IUser from '../interfaces/response/User' 
import Auth from '../services/Auth' 
import axios, { AxiosError } from 'axios' 
import { API_URL } from '../http' 
import IMessage from '../interfaces/response/Message'

export default class Store { 
  user = {} as IUser 
  isAuth = false 
  isLoaded = false 
 
  constructor () { 
    makeAutoObservable(this) 
  } 
 
  setAuth(bool:boolean) { 
    this.isAuth = bool 
  } 
 
  setUser(user:IUser) { 
    this.user = user 
  } 
 
  setLoaded(bool:boolean) { 
    this.isLoaded = bool 
  } 
 
  async login(email:string, password:string) { 
    this.setLoaded(false) 
    try { 
      const res = await Auth.login(email, password) 
      console.log(res); 
      localStorage.setItem("token", res.data.accessToken) 
      this.setUser(res.data.user) 
      this.setAuth(true) 
    } catch (e) { 
      const error = e as AxiosError 
      return error 
    } finally { 
      this.setLoaded(true) 
    } 
  } 
} 

guilds.tsx

 import { FC, useContext } from 'react' 
import styles from "./Servers.module.scss" 
import { BsDiscord } from 'react-icons/bs' 
import { AiOutlinePlus, AiOutlineDownload } from 'react-icons/ai' 
import { FaCompass } from 'react-icons/fa6' 
import server_1 from '../../assets/servers/server-1.png' 
import { Link } from 'react-router-dom' 
import { Context } from '../../main' 
import { observer } from 'mobx-react-lite' 
 
const Servers:FC = ():JSX.Element => { 
  const {store} = useContext(Context) 
 
  return ( 
    <> 
     
    
 
      
 
         
      
 
      
 
        {store.user.guilds.map((e, index) => ( 
          
 
             
          
 
        ))} 
      
 
      
 
        
 
           store.setCreateForm(true)}> 
        
 
        
 
           
        
 
        
 
           
        
 
      
 
    
 
     
     
  ) 
} 
 
export default observer(Servers)