My Random Quote Machine is working but is not passing test #9

here is a link to my codepen:
https://codepen.io/Hker/full/BERJqg

here is my code:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      quoteText:"",
      quoteAuthor:""
      }
  }
  
  componentDidMount() {
    axios.get('https://api.forismatic.com/api/1.0/?format=json&method=getQuote&jsonp=?&lang=en')
    .then(res => this.setState({
      quoteText:res.data.quoteText,
      quoteAuthor:res.data.quoteAuthor
    }));
       
  }
  handleClick() {
    axios.get('https://api.forismatic.com/api/1.0/?format=json&method=getQuote&jsonp=?&lang=en')
    .then(res => this.setState({
      quoteText:res.data.quoteText,
      quoteAuthor:res.data.quoteAuthor
    }));
  }

    

  render() {
    let tweetUrl = "https://twitter.com/intent/tweet?hashtags=quotes&text=" + this.state.quoteText + " ― " + this.state.quoteAuthor;
  
    return (
      <div className="App" id="quote-box" style={{margin:"auto"}}>Hello there!
          <div id="text">
       <Quote text={this.state.quoteText} />
       </div>
        <p id="author">{this.state.quoteAuthor}</p>
       <div >
         <button id="new-quote" onClick={this.handleClick.bind(this)}>Get a new Quote</button>
         <a href={tweetUrl} className="fa fa-twitter" id="tweet-quote" target="_blank" rel="noopener noreferrer"> </a>
        </div>

      </div>
      
    );
  }
}

class Quote extends React.Component {
  render() {
    return (
      <div>
       {this.props.text}
      </div>
    );
  }
}

React.render(<App />, document.getElementById('root'));