Random Quote Generator(on load task)

1

I created random quote generator and when i click button the quotes is coming perfectly but when browser is loaded there is no quotes please help me…

import React from "react";
import "./App.css";
import { render } from "react-dom";
import { FaQuoteLeft } from 'react-icons/fa';
import { FaTwitterSquare } from 'react-icons/fa';


class QuoteGenerator extends React.Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      quotes: null,
      randomQuote: null,
      author:null
    };
    this.randomQuoteNumber = this.randomQuoteNumber.bind(this);
  }
  async componentDidMount() {
    const url =
      "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json/";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ quotes: data["quotes"], loading: false });
    console.log(this.state.quotes.length);
  }
  
  randomQuoteNumber() {
    const randNum = Math.floor(Math.random() * this.state.quotes.length);
    const randomQuote = this.state.quotes[randNum];
    this.setState({
      randomQuote: randomQuote,
    });
  }
  
  render() {
    if (this.state.loading) {
      return <div>loading...</div>
    }
    
    return (
      
      <div className="App" id="quote-box">
          <div className="grid">
            
            <div className="text" id="text"><FaQuoteLeft id="left-quote" />{this.state.randomQuote !==null && this.state.randomQuote.quote}</div>
          </div>
          <div id="author">- {this.state.randomQuote !==null && this.state.randomQuote.author}</div>
          <div className="button-anchor-tag">
              <a href="url" id="tweet-quote"><FaTwitterSquare /></a>
              <button id="new-quote" onClick={this.randomQuoteNumber}>New Quote</button>
          </div>
      </div>
    );
  }
}

export default QuoteGenerator;