my when running the eventlistener, my code executes the ${input.value} instead of text from the input section, what could be wrong here

HTML Code indicating the classes and id of the respective elements.

            <div class="input-group mb-3" >
        <input type="text" class="form-control" id="input-item" value="">
        <div class="input-group-preppend">
            <button type="button" class="btn btn-success" id="add-item" >Add</button>
            <button type="button" class="btn btn-info" id="delete">Delete</button>
        </div>
       </div>
            
    <div id="display-item">

       <div class="item">
            
            <!--<p>New list items appear here!</p>

            <div class="item-btn">
             <i class="fa-regular fa-pen-to-square"></i> 
             <i class="fa-solid fa-square-xmark"></i>
            </div>-->

        </div> 

    
       </div>
    

JS Code showing what should be happen when i key in a word inside the input section and click on add, it shows ${input.value} instead

              let input = document.querySelector('#input-item');
              let add = document.querySelector('#add-item');
              let display = document.querySelector('#display-item');

        add.addEventListener('click', () => {
       if (input.value.trim() !=0) {
       let newItem= document.createElement('div');
       newItem.classList.add('item')
       newItem.innerHTML = '<p> ${input.value} </p> <div class="item-btn"> <i class="fa- 
       regular fa-pen-to-square"></i> <i class="fa-solid fa-square-xmark"></i> </div>'


       display.appendChild(newItem);
       input.value= '';
       } else {
       alert('please add an item!')
        }
       });

this is the js code