Change parameter in API call with Reactjs

Question

I’m using Axios to consume an API and create a personal project. endpoint is this: https://www.freetogame.com/api/games I added a "Learn more" button where I would redirect to a "page" where there are only the game’s hints clicked, but in the endpoint link, the "games" is singular, so: https://www.freetogame.com/api/GAME?id=452.

I decided to pass these parameters by Hook, so that, passing the function changing Rl to the button in onClick so that when clicking on it, a new value was set, which would be the parameter in the singular, "game", but I get an error in the console and I was lost. Could you help me?

Follow the code below :

const [games, setGames] = useState([]);
const [define, setDefine] = useState('games');


useEffect(()=>{
  
  async function loadGames(){
    const response = await api.get(define);
    setGames(response.data)
  }

  loadGames()
}
,[])


function mudarUrl(){
  setDefine('game')
}

After that I’m just wearing one Map to render the API data, which is working perfectly. Follow the error code in the console when I click on the "Learn more"

GET https://www.freetogame.com/api/? id=2 net:ERR_TOO_MANY_REDIRECTS

Uncaught (in Promise) Error: Network Error
>> creatat eError (createError.js:16)
>> At Xmlhttprequest.handleError (xhr.js:84)