WebXR and threeJS setup layer

I try to migrate from WebVR to WebXR as Oculus Browser 9 does not support WebVR any more.

My goal is to get position and orientation data in real world movement of headset relative to world space with webXR API.
I want to make webXR work with three JS and its methods. But I have failed during the sequence of the tasks should be implemented.
My webXr works with “local” referencespace but scene and the rotating mesh(cube) in the scene moves toward the direction of headset when I rotate my head with Oculus Quest headset.

There is something wrong with the projection matrix, view matrix implementation I believe?
As a consequence, when I get the pose position with getViewerPose() and orientation data, they dont give correct results.

I welcome to any comment any clue that helps me progress.
During my development process, my main reference was this source: https://01.org/blogs/darktears/2019/rendering-immersive-web-experiences-threejs-webxr
This is my project : https://drive.google.com/drive/folders/1D0rXQhyn7eLASEVRzkLvo-82NHR9zmkc?usp=sharing