Javascript – Why am I getting a 'cannot read properties of null' error with dot notation in React, and how can I fix it?

using traditional ways of accessing objects with dot notation {quote.text} {quote.author} i’m receiving a "cannot read properties of null" error

import { useState, useEffect } from 'react';
import "./React.css";


   
function getRandomQuote(quotes) {
    return quotes[Math.floor(Math.random() * quotes.length)];
  }
  
  export default function App() {
    const [quotes, setQuotes] = useState([]);
    const [quote, setQuote] = useState(null);
  
    useEffect(() => {
      fetch("https://type.fit/api/quotes")
        .then((res) => res.json())
        .then((json) => {
          setQuotes(json);
          setQuote(json[0]);
        });
    }, []);
  
    function getNewQuote() {
      setQuote(getRandomQuote(quotes));
    }

  
    return (
      <main>
        <h1>Project 3: Quote Generator</h1>
        <section>
          <button onClick={getNewQuote}>New Quote</button>
          <h3>
            {quote.text}
          </h3>
          <i>- {quote.author}</i>
        </section>
      </main>
    );
  }

When I tried question mark with dot notation {quote?.text} {quote?.author} I got back my intented results. What was causing the error with regular dot notation?

import { useState, useEffect } from 'react';
import "./React.css";


   
function getRandomQuote(quotes) {
    return quotes[Math.floor(Math.random() * quotes.length)];
  }
  
  export default function App() {
    const [quotes, setQuotes] = useState([]);
    const [quote, setQuote] = useState(null);
  
    useEffect(() => {
      fetch("https://type.fit/api/quotes")
        .then((res) => res.json())
        .then((json) => {
          setQuotes(json);
          setQuote(json[0]);
        });
    }, []);
  
    function getNewQuote() {
      setQuote(getRandomQuote(quotes));
    }

  
    return (
      <main>
        <h1>Project 3: Quote Generator</h1>
        <section>
          <button onClick={getNewQuote}>New Quote</button>
          <h3>
            {quote?.text}
          </h3>
          <i>- {quote?.author}</i>
        </section>
      </main>
    );
  }