WebGL Cannot Draw More Than 44 Points Even If Enough Buffer Space

As the title says I have a WebGL application. I am making use of drawArrays in such a fashion

gl.drawArrays(gl.LINES, 0, 44);

But I seem to be running into a problem where if I try to draw more than 44 points than I get the following error

[.WebGL-0x7000c6e700] GL_INVALID_OPERATION: Vertex buffer is not big enough for the draw call

And I have checked to make sure I have enough buffer space even hardcoding the values, it happens on whatever browser I am on.

I think the problem is my laptop (M1 MacBook Pro) as when I move the code to my windows desktop it runs fine.

// edit As for a code example

// points is an array of 46 points i.e. [[0,0,1,1],....]
let wBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, wBuffer);

gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);

let vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

gl.drawArrays(gl.LINES, 0, 46);