Porque con React.useState() utiliza esto: const [query, setQuery] = React.useState(’’); // utiliza corchetes. y en useSearchBadges() util...

Utiliza una técnica de Javascript que se llama destructuring. En el primer caso haces destructuring de un arreglo donde el primer elemento es el valor que del estado y el segundo elemento es la función para un valor nuevo al estado. En el segundo caso, estas haciendo un destructuring de un objeto, en este caso el orden no importa pero el nombre si.

Saludos.