InnerHTML no muestra el contenido en formato de cadena de texto.

Estoy intentando mostrar dos botones con .innerHTML pero no aparece el contenido que se coloca en el string.
La consola no muestra ningún error y he revisado si hay errores de escritura, pero no he encontrado nada.

Aquí está mi HTML:

<div class="buttons">
   <div class="buttons_inner" id="buttonShiny"></div>
</div>

Y aquí está mi JS:

const shiny = document.getElementById('buttonShiny');

const displayButtonShiny = (pokemon) => {
  const shinyHTMLString = `
    <button class="buttons_shiny" onclick="document.getElementById('pokemonSprite').src='https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/${pokemon.id}.png'">Shiny</button>
    <button class="buttons_normal" onclick="document.getElementById('pokemonSprite').src='https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png'">Normal</button>
`;
    shiny.innerHTML = shinyHTMLString;
};

El contenido en la variable shinyHTMLString debería mostrarse en el div #buttonShiny, pero no funciona.

La etiqueta script para llamar al archivo JS está justo antes de la etiqueta de cierre del body.