How do you create an object from points, in order to be able to insert it into a GUI?

I am currently following Bruno Simons Three.js journey, in the section regarding Mixing Html with WebGl, in the tutorial you are essentially trying to pin a text box to a 3D model. I have the GUI imported and ready but I'm finding it hard to understand what it is I need to 'gui.add(...)' to be able to tweak the position of the text in the GUI.

HTML

<div class="point point-0">
 <div class="label">1</div>
 <div class="text">Lorem ipsum dolor sit amet consectetur, 
     adipisicing elit. Neque commodi consequatur maxime.
     </div>

Javascript

  const points = [
{
    position: new THREE.Vector3(1.55, 0.1,  1.9),
    element: document.querySelector('.point-0')
}

]

in the tick function

for(const point of points)
 {
 const screenPosition = point.position.clone()
 screenPosition.project(camera)
 const translateX = screenPosition.x * sizes.width * 0.5
 const translateY = - screenPosition.y * sizes.height * 0.5
 point.element.style.transform = `translate(${translateX}px, ${translateY}px)`}

Solution

The Answer for anyone else who has this problem is that the GUI must be added with the index after the object:

`gui.add(points[0].position, 'y')`

which is the '[0]' after the 'points'