Duvida com init de component de arrow function e tipagem de state

O problema parece vir do destructuring no useState, pois no erro diz que o retorno da função useState não é iterável. Você poderia associar o valor retornado por esse hook a uma única variável ao invés de dividir em duas e dar um console log nessa variável pra tentar descobrir qual o problema.

Ex.:

const useStateReturn = useState<Array<GameBanner>>([]);
console.log(useStateReturn);

Já até tentei achar o erro copiando o seu código, mas funcionou tudo corretamente, só que percebi um problema nele (não relacionado ao erro): a arrow function que você passou no banners.map() ficou faltando um retorno. Então você deveria colocar um return antes do elemento <li> ou remover as chaves {} e colocar parênteses (). Os parênteses não são necessários nessa última alternativa, mas servem pra deixar o código mais legível.