Estoy tratando de hacer un campo de entrada de autocompletar en mi aplicación. Recibo las sugerencias de una API externa. Cuando inicio la aplicación, se envían muchas llamadas a la API y continúan enviándose hasta que detengo la aplicación. Ni siquiera estoy haciendo clic en el botón, pero la función getSuggestions envía solicitudes. ¿Por qué está pasando esto?

 import axios from "axios"; import { useEffect, useState } from "react"; import { Button, Form, Row, Col } from "react-bootstrap"; import constants from "../../constants"; function Autocomplete() { const [suggestions, setSuggestions] = useState([]); function getSuggestions(inputText) { const config = { params: { search_term: inputText, search_type: 'listings' }, headers: { 'x-rapidapi-host': 'zoopla.p.rapidapi.com', 'x-rapidapi-key': 'x' } }; axios.get(`${constants.baseUrl}auto-complete`, config) .then(response => { const suggestionsList = response.data.suggestions.map(x => x.value); setSuggestions(suggestionsList); console.log(suggestions); }) } useEffect(()=>{ getSuggestions('Oxford'); },[]); return ( <Row className="d-flex align-items-center"> <Col> <Form.Control type="text" placeholder="Area" /> </Col> <Col> <Button variant="primary" type="button" onClick={getSuggestions('Oxford')}> Search </Button> </Col> </Row> ); } export default Autocomplete;