OVER_QUERY_LIMIT React js - reactjs

Question

while fetching data from google it showing OVER_QUERY_LIMIT.here i am using react-places-autocomplete npm. when i am using this npm inside dashboard then it showing like this. i am using a key for fetching data.this error message i am getting inside rendering process.
code:-
import React, { Component } from 'react';
import data1 from '../forms/data1'
import data2 from '../forms/data2'
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
import {
Button,
Card,
CardBody,
CardFooter,
CardHeader,
Col,
Form,
FormGroup,
Input,
Row,
} from 'reactstrap';
class data extends Component {
constructor(props) {
super(props);
this.state = {
newAssociate: true,
newOutlet: true,
address: '' ,
};
}
handleChange = address => {
this.setState({ address });
};
handleSelect = address => {
geocodeByAddress(address)
.then(results => getLatLng(results[0]))
.then(latLng => alert(JSON.stringify(latLng)))
.catch(error => console.error('Error', error));
};
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" md="6">
<data1 />
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Outlet</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
<FormGroup row>
<Col md="6">
<PlacesAutocomplete
value={this.state.address}
onChange={this.handleChange}
onSelect={this.handleSelect}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<Input
{...getInputProps({
size: "sm",
placeholder: 'Search ...',
className: 'location-search-input',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
</Col>
<Col md="6">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">City</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="email" id="email-input" name="email-input" bsSize="sm" placeholder="Email" autoComplete="email"/>
</Col>
<Col xs="12" md="6">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Category</option>
<option value="1">Restaurants</option>
<option value="2">Bars & Pubs</option>
<option value="3">Beauty</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input id="landline-input" name="landline-input" bsSize="sm" placeholder="Land Line"/>
</Col>
<Col xs="12" md="6">
<Input id="exact-input" name="exact-input" bsSize="sm" placeholder="Mobile"/>
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Location</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</Input>
</Col>
<Col xs="12" md="6">
<Input id="exact-input" name="exact-input" bsSize="sm" placeholder="Exact Location"/>
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<FormGroup>
<Input type="textarea" name="textarea-input" bsSize="sm" id="textarea-input" rows="6"
placeholder="Outlet Address" />
</FormGroup>
<FormGroup row>
<Col md="4">
<FormGroup><Button size="sm" color="dark" className="btn-pill">Cordinates</Button></FormGroup>
</Col>
<Col md="8">
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Latitude" /></FormGroup>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Longitude" /></FormGroup>
</Col>
</FormGroup>
</Col>
<Col md="6">
<Card>
<CardBody>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Contact Name" /></FormGroup>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Phone" /></FormGroup>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Email" /></FormGroup>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Designation" /></FormGroup>
</CardBody>
</Card>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<div className="card-header-actions">
<Button type="submit" size="sm" color="dark"><i className="fa fa-dot-circle-o"></i> Create</Button>
</div>
</CardFooter>
</Card>
</Col>
</Row>
</div>
);
}
}
export default data;
i am getting OVER_QUERY_LIMIT error
thanks in advance