The purpose of my website is to find a hex color code by hitting a button, while the website's background is randomly changed by itself. However, when the button is clicked, the printed color code does not match with the current background color. how can I fix this?

```js
const infiniteColorChange = setInterval(() => {
  setColor()
  }, 5000);

function setColor() {
   document.body.style.backgroundColor = getRandomColor(); 
  } 

function getRandomColor() {
  for(let y = 0; y < 16777215; y++) {
    const randomNumber = Math.floor(Math.random()*16777215);
    return "#" + randomNumber.toString(16);
  }
}

function stopColor() {
  clearInterval(infiniteColorChange);
  document.getElementById("hexcode").innerHTML = getRandomColor(); // printed code does not match with bg
}
```

```html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>What color is it</title>
</head>
<body>
    <h1>What color is it ...</h1>

    <h2 id="hexcode"></h2>

    <div id="center">
        <input type="button" onclick="stopColor()" class="button" value="Find A Color Code For Me">        
    </div> <!-- onclick stop loop -->
</body>
</html>
```