NextJS Image url not changing in different endpoints

Question

So currently I have an issue where I have a Channel Tab where it displays the channel icon and name. Now the problem is, every time I change channels the icon stays the same as the first channel I clicked.

PREVIEW

This is my current code: https://sourceb.in/IsTYrBRjMv

How do I make it change every time I enter a new channel?

Note: Every channel has a different endpoint

Answer 1

Try adding a useEffect, something like this (you may need to adjust)

  useEffect(() => {
    setData(channel.icon);
  },[channel]);