Uv map not loading correctly in three.js

My uv map is loading like it's one side of a block:

Here is my code:

    const grass = new THREE.TextureLoader().load( 'https://raw.githubusercontent.com/Isaiah08-D/namelater/main/textures/blocks/grass.png' );
    
    
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({map:grass});
    ...

  var noise = new noisejs.Noise(Math.random());



    for (let x=0; x < 201; x += 10) {
      for (let z=0; z<201; z+=10) {
        //const chunk = getChunk(x, z)
        const cube = new THREE.Mesh(geometry, material)
        cube.position.x = x
        cube.position.z = z
        cube.position.y = noise.perlin2(x/100, z/100) * 100;
        cube.scale.set(10,10,10);
        blocklist.push(cube);
        scene.add( cube );
      }
    };

And you can find the uv map here. How do i get it to load so that each tile is one side: etc.
Thanks in advance!