Quando eu coloco a classe na primeira ele funciona , mas na segunda (com a mesma classe) o efeito não funciona - JavaScript

• Quando eu clica-se em alguma dessas latas o background ia mudar de cor e a lata principal também :

  

• Só que o background da segunda section não esta mudando de cor(E ela tem a mesma class) :
  

Obs : eu quero que a classe de cima fica com a mesma cor da classe debaixo.

• HTML

<!--Primeira <section>  -->
<section class="corDeFundo">
    
</section>
<!-- Segunda <Section>-->
<section class="corDeFundo">
    <div class="produto" id="produto">
        <h1>produto</h1>
    </div>
</section>

• JavaScript(Completo)

  const corDeFundo = document.querySelector(".corDeFundo")
    const latasDeRefri = document.querySelectorAll(".latasDeRefri li")
    const pepsiPrincipal = document.querySelector(".pepsi")
  
    latasDeRefri[0].addEventListener("click",()=>{
        pepsiPrincipal.src = "imagem/pepsi1.png"
        corDeFundo.style.background = "#004999"
        corDeFundo.style.transition = "0.5s"
    })
    latasDeRefri[1].addEventListener("click",()=>{
        pepsiPrincipal.src = "imagem/pepsi2.png"
        corDeFundo.style.background = "#ED0223"
        corDeFundo.style.transition = "0.5s"
    })
    latasDeRefri[2].addEventListener("click",()=>{
        pepsiPrincipal.src = "imagem/pepsi3.png"
        corDeFundo.style.background = "#191C1E"
        corDeFundo.style.transition = "0.5s"
    })