Adding branches to a star using JavaScript

I’m still a beginner at programmation and I am currently working on a script aiming at creating a 5-branch star and adding new branches whenever I click onto the button in the middle of the star. I advanced a lot already but I’m blocked at the Java stage, since I can’t manage to get the new branches spawning at the star’s centre.
Here is my code so far:

console.log("Test")

window.addEventListener('DOMContentLoaded', () => {
  const centre = document.getElementById("centre");

  let compteurBranches = 0;
  centre.querySelectorAll(":scope > div").forEach(el => {
    el.style.setProperty("--image-numero", compteurBranches);
    compteurBranches++;
  });

  centre.style.setProperty("--compteur-branches", compteurBranches);

  document.getElementById("bouton").addEventListener("click", (event) => {
    event.preventDefault();

    const imageNumero = compteurBranches;
    const html = `<div style="--image-numero:${imageNumero};"><img src="branch.png" class="image"></div>`;
    centre.insertAdjacentHTML("afterbegin", html);

    compteurBranches++;
    centre.style.setProperty("--compteur-branches", compteurBranches); 
  });
});
main{
    font-family: "Montserrat", sans-serif;
}

div#main {
    width: 900px;
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}

div#centre {
    position: absolute;
    height: 0px;
    width: 100%;
    top: 50%;
    left: 50%;
    display: inline-block;
}

button#bouton{
    width: 200px;
    height: 200px;
    filter: drop-shadow(0px 0px 8px black);
    border: 1px black solid;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    z-index: 1;
    left: 50%;
    top: 0px;
    position: absolute;
}

div#centre > div { 
    position: absolute;
    z-index: 0;
    background-repeat: no-repeat;
    --angle: calc(90deg + var(--image-numero) * 360deg / var(--compteur-branches));
    transform: rotate(var(--angle));
}


.image {
    transform: rotate(calc(-1 * var(--angle)));
    filter: hue-rotate(var(--angle));
    background-image: url(./branch.png);
    background-repeat: no-repeat;
    transform-origin: top;
    width: 200px;
    height: 344px;
    position: absolute;
    left: 50%;
    top: 100px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="dm.css">
    <title>DM</title>
</head>
<body>
    <div id="main" style="--compteur-branches:5;"> 
        <div id="centre">
            <div class="image" id="image1" style="--image-numero:0;"></div>
            <div class="image" id="image2" style="--image-numero:1;"></div>
            <div class="image" id="image3" style="--image-numero:2;"></div>
            <div class="image" id="image4" style="--image-numero:3;"></div>
            <div class="image" id="image5" style="--image-numero:4;"></div>
            <button id="bouton">
                Cliquer pour ajouter une branche
            </button>
        </div>
    </div>
</body>
<script type="text/javascript" src="dm.js"></script>
</html>