Java Script Space key is giving me only one space character when is pressed

Question

Hey guys I am doing Virtual Keyboard with Vanila JavaScript. I am using key up event and click event on space bar but when I press on the browser it shows me only one space character not as many as I have pressed. Can you help me pls I am new. :)

This is my code that I wrote:

let button = document.querySelectorAll(".letter-btn");
let typedText = document.querySelector(".typing-text");
let spaceBtn = document.querySelector(".space-btn");
let deleteBtn = document.querySelector(".delete-btn");
let array = [];

button.forEach((button) => {
  button.addEventListener("click", (event) => {
    let letter = event.target.innerText;
    typedText.textContent += letter;

    array = typedText.textContent.split("");
    console.log(array);
  });
});

spaceBtn.addEventListener("click", () => {
  typedText.textContent += " ";
});

deleteBtn.addEventListener("click", () => {
  array.pop();
  typedText.textContent = array.join("");
  console.log(array);
});

document.addEventListener("keyup", (event) => {
  if (event.key === "Backspace") {
    array.pop();
    typedText.textContent = array.join("");
    console.log(array);
  } else if (event.code === " Space") {
     
    typedText.textContent += " ";
    
  } else {
    typedText.textContent += event.key;
    array = typedText.textContent.split("");
  }