Something wrong with my state in react ??

#react

This is what i am trying to do :

" Every time the GET new Quote button is clicked it flips click between true/false, like flipping a lightswich on and off. Every time the newQuote property on gets a new value, the QuoteBox component rerenders. Every time the component rerenders, it calls fetch in componentDidMount " *

Please someone help me to runmy code properly

Here is my code on sandbox:

I created this inside index.js

class Parent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     click: false
   };
 }

 render() {
   return (
     <>
       <QuoteBox newQuote={this.state.click} />
       <button onClick={() => this.setState({ click: !this.state.click })}>
         Get new quote
       </button>
     </>
   );
 }
}

I created this inside App.js

<button onClick={() => this.setState({ click: !this.state.click })} 
        className="btn btn-primary"
        id="new-quote"
        >
        NEW QUOTE{this.props.newQuote}
</button>