Hi I'm working on a drag and drop component website editor. So I added a button when you click it it shown an input element and your input becomes the text of an paragraph element that's pushed to an array everytime you do it My problem is that I want to make it so that when you click with the mouse the mouse x,y position becomes the left,top property of the paragraph element But it sends me an error that says: Cannot read properties of undefined (reading 'left') I already have the code that gets the mouse position so don't worry about it Here's the code

//imports
import {mouse} from '/mouse.js'
//variables
let text_data_holder = document.getElementById('text-field')
let text_data = ''
//Creating text
let text_array = []
text_button.addEventListener('click', function() {
  text_data_holder.style.display = 'block'
})
text_data_holder.addEventListener('change', function(e) {
   e.preventDefault()
   text_data += e.target.value
     for(let i = 0; i < 1; i++){
       text_array[i] = document.createElement('p')
       .innerText = text_data
       text_data_holder.after(text_array[i])
       console.log(text_data)
       text_array[i].left = mouse.x
    }
})