Why do I see only half of crate? - three.js

Question

I don't understand why I only see half of crate. I recall that it happened to me before, with other graphics pipelines.
Here is the fiddle link: https://jsfiddle.net/20azohgc/10/
Here is the code:
//Basic THREE setup:
const canvas = document.getElementById("canvasThree");
const scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, 1, 1, 500);
camera.position.set( 0, 0, 100 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ));
camera.position.set( 0, 0, 100 )
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) )
const renderer = new THREE.WebGLRenderer({ canvas });
const light = new THREE.PointLight(0xFFFFFF);
light.position.set(0, 1, 2);
scene.add(light);
var texture = new THREE.TextureLoader().load( "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif" );
var material = new THREE.MeshBasicMaterial({ color: "white", map: texture });
const pos = new Float32Array([0, 0, 0, 0, 10, 0, 10, 10, 0, 0, 0, 0, 10, 0, 0, 10, 10, 0]);
const nrm = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
const tex = new Float32Array([0,0, 1,0, 1,1, 0,0, 0,1, 1,1]);
const geo = new THREE.BufferGeometry();
geo.addAttribute("position", new THREE.BufferAttribute(pos, 3));
geo.addAttribute("normal", new THREE.BufferAttribute(nrm, 3));
geo.addAttribute("uv", new THREE.BufferAttribute(tex, 2));
//This is a drawing group, each square is 6 indices (2 triangles with 3 vertices each).
geo.addGroup(0 ,6,0);
const mesh = new THREE.Mesh(geo, [material]);
mesh.position.set(-2,-0.5,0);
scene.add(mesh);
function update(){
scene.rotation.y = 0.25 * Math.cos(performance.now() * 0.001)
renderer.render(scene, camera);
requestAnimationFrame(update);
}
update();