Why is my array.map() not returning a new value when using spread operator?

const booksContainer = document.querySelector('.booksContainer');
const buttonNewBook = document.querySelector('.buttonNewBook');
const buttonConfirm = document.querySelector('.confirmBook')
const inputContainer = document.querySelector('.addNewBook');


buttonNewBook.addEventListener('click', () => {
  
  if (inputContainer.style.display === 'none') {
    inputContainer.style.display = 'flex'
  } else {
    inputContainer.style.display = 'none'
  } 
  
  if (buttonConfirm.style.display === 'none') {
    buttonConfirm.style.display = 'inline'
  } else {
    buttonConfirm.style.display = 'none'
  }
});




const books = [
{
  id: 1,
  imageUrl: '',
  title: 'Title:',
  author: 'Author:',
  pages: 'Pages:'
},
{
  id: 5, imageUrl: '',
  id: 6, title: 'Title:',
  id: 7, author: 'Author:',
  id: 8, pages: 'Pages:'
},
{
  id: 9, imageUrl: '',
  id: 10, title: 'Title:',
  id: 11, author: 'Author:',
  id: 12, pages: 'Pages:'
},
{
  id: 13, imageUrl: '',
  id: 14, title: 'Title:',
  id: 15, author: 'Author:',
  id: 16, pages: 'Pages:'
}
]


books.forEach((book, index) => {
let booksDisplay = document.createElement('div')
booksDisplay.setAttribute('class', 'booksDisplay')
booksContainer.appendChild(booksDisplay)

let booksDisplayImage = document.createElement('img');
    booksDisplayImage.src = (`${book.imageUrl}`)
    booksDisplayImage.setAttribute('class', 'booksImage');
    booksDisplay.appendChild(booksDisplayImage);

  let imageContainer = document.createElement('div')
    imageContainer.setAttribute('class', 'imageContainer');
    booksDisplay.appendChild(imageContainer);
    imageContainer.appendChild(booksDisplayImage)


  let booksDisplayTextTitle = document.createElement('p');
      booksDisplayTextTitle.setAttribute('class', 'titleText')

  let booksDisplayTextAuthor = document.createElement('p');
      booksDisplayTextAuthor.setAttribute('class', 'authorText')

  let booksDisplayTextPages = document.createElement('p');
      booksDisplayTextPages.setAttribute('class', 'pagesText')

  let booksDisplayTextDisplayTitle = document.createTextNode(`${book.title}`);
      booksDisplayTextTitle.appendChild(booksDisplayTextDisplayTitle);

  let booksDisplayTextDisplayAuthor = document.createTextNode(`${book.author}`);
      booksDisplayTextAuthor.appendChild(booksDisplayTextDisplayAuthor)

  let booksDisplayTextDisplayPages = document.createTextNode(`${book.pages}`);
      booksDisplayTextPages.appendChild(booksDisplayTextDisplayPages);

  let textContainer = document.createElement('div');
    textContainer.setAttribute('class', 'textContainer');
    booksDisplay.appendChild(textContainer);
    textContainer.appendChild(booksDisplayTextTitle);
    textContainer.appendChild(booksDisplayTextAuthor);
    textContainer.appendChild(booksDisplayTextPages);

    booksContainer.appendChild(booksDisplay);

    let buttonRead = document.createElement('button')


    let buttonRemove = document.createElement('button');
    buttonRemove.addEventListener('click', () => {
      booksDisplayTextTitle.textContent = 'Title:';
      booksDisplayTextAuthor.textContent = 'Author:';
      booksDisplayTextPages.textContent = 'Pages:';
      booksDisplayImage.style.display = 'none';
      imageContainer.style.border = '1px solid rgb(107, 107, 107)'
    });

    let buttonReadText = document.createTextNode ('I have read this book');
    let buttonRemoveText = document.createTextNode ('Remove a book');

    buttonRead.appendChild(buttonReadText);
    buttonRemove.appendChild(buttonRemoveText);
    textContainer.appendChild(buttonRead)
    textContainer.appendChild(buttonRemove)

   
});

const inputTitle = document.querySelector('#title');
const inputAuthor = document.querySelector('#author')
const inputPages = document.querySelector('#pages')
const inputImageUrl = document.querySelector('#imageUrl')
inputImageUrl.value = '';
inputTitle.value = '';
inputAuthor.value = '';
inputPages.value = '';


const titleText = document.querySelector('.titleText');
const authorText = document.querySelector('.authorText');
const pagesText = document.querySelector('.pagesText');
const bookImageUrl = document.querySelector('.booksImage');

console.log(inputTitle)





buttonConfirm.addEventListener('click', () => {
  bookImageUrl.src = inputImageUrl.value;
  titleText.textContent = 'Title:' + ' ' + inputTitle.value;
  authorText.textContent = 'Author:' + ' ' + inputAuthor.value;
  pagesText.textContent = 'Pages:' + ' ' + inputPages.value;
  const newBooks = books.map(newBook => {
    if (newBook.id == 1) {
      return {...newBook, author: inputAuthor.value, title: inputTitle.value, pages: inputPages.value}
    
    }
    return newBook;

  });
  console.log(newBooks)
});

console.log(books)

<!DOCTYPE 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">
    <link rel="stylesheet" href="./styles/style.css">
    <title>Document</title>
</head>
<body>
<div class="myLibrary">
    
  <form class="addNewBook">
    <input type="text" name="titles" id="title" placeholder="Title">
    <input type="text" name="author" id="author" placeholder="Author">
    <input type="number" name="pages" id="pages" placeholder="Number of pages">
    <input type="link" name="imageUrl" id="imageUrl" placeholder="Image URL">
  </form>

  <div class="buttonContainer">
    <button class="buttonNewBook">Add a new book</button>
    <button class="confirmBook">Confirm</button>
  </div>

  <div class="booksContainer">
   
  </div>
    

    
    <script src="./scripts/script.js"></script>
</body>
</html>