我有一个ChatPage组件如下：

import React from 'react'
import axios from 'axios'
import ErrorBoundary from './ErrorBoundary'
const ChatPage = () => {
  const fetchChats= async()=>{
      const data=await axios.get('/api/getChats')
      return data
  }
  
  const [chats, setChats]=React.useState(null)
  React.useEffect(()=>{
    fetchChats().then((res)=>{
     setChats(res.data)
    })
  ;
  },[])
  return (
    <>
    <div>ChatPage</div>
    <ErrorBoundary> <div>{chats.chat}</div></ErrorBoundary>
   
    </>
  )
}

export default ChatPage

和ErrorBoundary组件如下：

import React from 'react'
class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  
    componentDidCatch(error, errorInfo) {
      // You can also log the error to an error reporting service
    
    }
  
    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return <h1>Something went wrong.</h1>;
      }
  
      return this.props.children; 
    }
  }
  export default ErrorBoundary

但是，如果聊天状态为null，则chats.data会抛出一个错误，该错误不在错误边界中。这里可能存在什么问题？