Unable to move in VR mode

[NithinChepuri]

I am unable to move using my controllers.

App.js code : "import { Canvas } from "@react-three/fiber"
import { Loader, PointerLockControls, KeyboardControls, Text, Sparkles, Html, Stars } from "@react-three/drei"
import { Debug, Physics, RigidBody } from "@react-three/rapier"
import { Player } from "./Player"
import { Suspense } from "react"

import { Planetest } from './Planetest'

import { VRButton, ARButton, XR, Controllers, Hands } from '@react-three/xr'

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Routes, BrowserRouter } from 'react-router-dom';

export default function App() {
const queryParams = new URLSearchParams(window.location.search)
const gravity = queryParams.get("gravity") || -9.8
const flycontrol = queryParams.get("flycontrol") || false
console.log(gravity)
console.log(flycontrol)

return (<>
{/* */}
<KeyboardControls
map={[
{ name: "forward", keys: ["ArrowUp", "w", "W"] },
{ name: "backward", keys: ["ArrowDown", "s", "S"] },
{ name: "left", keys: ["ArrowLeft", "a", "A"] },
{ name: "right", keys: ["ArrowRight", "d", "D"] },
{ name: "jump", keys: ["Space"] },
]}>


<Canvas camera={{ fov: 45 }}>


<directionalLight position={[10, 10, 5]} intensity={0.5} />
<Physics gravity={[0, gravity, 0]}>

          <Routes>
            <Route path="/" element={<Planetest/>} />
            {/* <Route path="/Finalcampusmap" element={<Finalcampusmap/>} /> */}
          </Routes>

          <Player flycontrol={flycontrol} />
          <Debug />

        </Physics>
        <PointerLockControls />
        <ambientLight intensity={0.5} />
        </XR>
      </Canvas>
    </Suspense>
    <Loader />
  </KeyboardControls>

</>
)
}
"

Player.js code "import * as THREE from "three";
import * as RAPIER from "@dimforge/rapier3d-compat";
import { useRef, useState, useEffect } from "react";
import { useThree, useFrame, Canvas } from "@react-three/fiber";
import { useKeyboardControls } from "@react-three/drei";
import { CapsuleCollider, RigidBody, useRapier } from "@react-three/rapier";
// const { gl, camera } = useThree()
// var step = new Audio('step.mp3');
let pos = [0, 0, 0];
const SPEED = 50;

export function Player(props) {
const flycontrol = props.flycontrol;
const ref = useRef();
const rapier = useRapier();
const { camera, gl } = useThree();
const [, get] = useKeyboardControls();

useEffect(() => {
const { forward, backward, left, right, jump } = get();
const velocity = ref.current.linvel();
const xrCamera = gl.xr.getCamera();

const updateCameraPosition = () => {
  if (gl.xr.isPresenting) {
    const [x, y, z] = ref.current.translation();
    xrCamera.position.set(x, y, z);
  }
};

if (gl.xr.isPresenting) {
  updateCameraPosition();
  gl.xr.addEventListener('sessionend', updateCameraPosition);
}
else{
  camera.position.set(...ref.current.translation());
}

console.log("Player's location:", ref.current.translation());
console.log("Player's linvel:", ref.current.linvel());

// Movement
let direction = new THREE.Vector3();
direction.set(40, 0, 0);

if (gl.xr && gl.xr.isPresenting) {
  const controller = gl.xr.getController(0);

  const handleSelectStart = () => {
    ref.current.setLinvel(direction);
    xrCamera.position.copy(new THREE.Vector3(100,-1,0));
  };
  controller.addEventListener('selectstart', handleSelectStart);

  // Handle selectend event
  const handleSelectEnd = () => {
    console.log("ended");
  };
  controller.addEventListener('selectend', handleSelectEnd);

}

// Handle non-VR movement
else {
  direction.set(0, 0, 0);
  const frontVector = new THREE.Vector3(0, 0, backward - forward);
  const sideVector = new THREE.Vector3(left - right, 0, 0);
  direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation);

  if (flycontrol) ref.current.setLinvel(direction);
  else ref.current.setLinvel({ x: direction.x, y: velocity.y, z: direction.z });
}

});

return (
<>
<RigidBody ref={ref} colliders={false} mass={1} type="dynamic" position={pos} enabledRotations={[false, false, false]}>
<CapsuleCollider args={[7, 0.5]}/>

</>
);
}
"