Why doesn't THREE.js LineGeometry work with orthographic camera?

I am working on a project that uses three.js and I am using an orthographic camera. I have tried using an external MeshLine package and also the built in THREE.LineGeometry. The MeshLine has a known issue with orthographic cameras that has not been fixed and this THREE.LineGeometry (which I am focused on trying to get to work) seems to also have a problem when I use an orthographic camera. The line sort of takes its shape but it is as wide as the entire viewport, and I am not sure why it is doing this or if I can fix it with a property.

I am looking for either a solution to one of the line types I listed or any other working 2D line solutions for three.js.

This is an image of a THREE.LineGeometry that is supposed to be just a diagonal line. Those grey arrows are a part of my project, and are supposed to be there (my concern is that the line is large and clips through them currently).

Here is my code:

        var lineGeometry = new LineGeometry();
        lineGeometry.setPositions([0,0,0,1,0,1,2,0,2,3,0,3]);
        lineGeometry.setColors([0,0,255,0,0,255,0,0,255,0,0,255]);
        console.log(lineGeometry)
        var lineMaterial = new LineMaterial({
            color: 0xffffff,
            vertexColors: true,
            dashed: false,
            lineWidth: 1,
        });
        var myLine = new Line2(lineGeometry, lineMaterial);
        myLine.computeLineDistances();
        this.Scene.add(myLine);

When using the LineGeometry in three.js, make sure to also set the viewport size for the line material shader either in the update loop or on window resize.

myLineMaterial.resolution.set(window.clientWidth, window.clientHeight);