Mesh positions not updating in Three JS Plane Buffer Geometry

I am trying to create a 2d mesh plane in Three JS, and update the position of each vertex by accessing the position attribute like so:

function planeGeometry()
{
var mat = new THREE.MeshBasicMaterial({color: "red",  wireframe: true,  transparent: true,  opacity: 1});
const geometry = new THREE.PlaneBufferGeometry( 2, 3, 0.01, 0.1 );
const plane = new THREE.Mesh( geometry, mat );
scene.add( plane );
}
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array( [
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,

     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0, -1.0,  1.0
] );

// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

function animate()
{
    requestAnimationFrame(animate);
    mesh.geometry.attributes.position[0] += 0.01;
    mesh.geometry.attributes.position.needsUpdate = true;
    renderer.render(scene, camera);


}
animate();

But I get no change in position. What am I doing wrong?