rick and morty infinity loop on query - reactjs

Question

hello im using rick & morty API, im trying to filter by location id i can search by id but if i clear the input and press enter the page loops and never render my data
im using a custom hook to call the API from inputs.
import axios from 'axios'
import React, { useEffect, useState } from 'react'
const useFetch = (URL) => {
const [response, setResponse] = useState()
useEffect(() => {
axios.get(URL)
.then(res => setResponse(res.data))
.catch(err => console.log(err))
}, [URL])
return response
}
export default useFetch
here im rendering the characters from rick and morty
import React from 'react'
import useFetch from '../hooks/useFetch'
const CardResidents = ({url}) => {
const residents = useFetch(url)
const bgColor = {
}
if (residents?.status === "Dead") {
bgColor.backgroundColor = "red"
}else if (residents?.status === "Alive") {
bgColor.backgroundColor = "green"
}else {
bgColor.backgroundColor = "gray"
}
return (
<div className='resident'>
<div className='status'><div className='circle' style={bgColor}></div> {residents?.status}</div>
<img className='resident-img' src={residents?.image} alt="" />
<h2 className='resident-name'>{residents?.name }</h2>
<hr />
<p className='resident-info'>Type</p>
<p className='resident-fetch'>{residents?.type }</p>
<p className='resident-info'>Origin</p>
<p className='resident-fetch'>{residents?.origin.name }</p>
<p className='resident-info'>Appearance in episodes</p>
<p className='resident-fetch'>{residents?.episode.length}</p>
</div>
)
}
export default CardResidents
this is the input im using to search location by id, but everytime y clear my input the page starts an infinity loop
import React from 'react'
const Query = ({setQueryFetch}) => {
const submitQuery = (e) => {
e.preventDefault()
const test = e.target.query.value
setQueryFetch(test)
console.log( test + "query")
}
return (
<form action="" onSubmit={submitQuery}>
<input id='query' type="text" placeholder='Search for locations between 1 - 126'/>
</form>
)
}
export default Query
and this is my main component where im renderin everything, im trying to select if the data will render by the randomID, or my query
import { useState } from 'react'
import './App.css'
import CardResidents from './components/CardResidents'
import LocationInfo from './components/LocationInfo'
import useFetch from './hooks/useFetch'
import banner from '../public/rick-morty-banner.jpg'
import Query from './components/Query'
function App() {
const randomId = Math.ceil(Math.random() * (126 - 1) +1)
const [queryFetch, setQueryFetch] = useState("")
let location = useFetch(`https://rickandmortyapi.com/api/location/${randomId}`)
if (queryFetch != "") {
console.log(queryFetch + " app")
location = useFetch(`https://rickandmortyapi.com/api/location/${queryFetch}`)
}else {
location = useFetch(`https://rickandmortyapi.com/api/location/${randomId}`)
}
return (
<div className="App">
<img className='banner' src={banner} alt="" />
<Query setQueryFetch={setQueryFetch}/>
<LocationInfo location={location}/>
<div className='resident-container'>
{
location?.residents.map(url =>(
<CardResidents
key={url}
url={url}
/>
))
}
</div>
</div>
)
}
export default App