React XR: Problems with augmented rea

Question

I am trying to use React XR to display some simple meshes in AR, but I am not getting the mesh to be displayed in AR.This is all the code:

    import "./App.css";
    import { Canvas } from "@react-three/fiber";

    import React from "react";
    import { XR, ARButton, Controllers } from "@react-three/xr";
    import Experience from "./components/Experience";
    import Configurator from "./components/Configurator";
    import { CustomizationProvider } from "./context/Customization";
    import XRModel from "./Xrmodel";

    function App() {
      return (
        <div className="App">
          <CustomizationProvider>
            <ARButton />
            <Canvas>
              <XR referenceSpace="local">
                <ambientLight />
                <pointLight position={[10, 10, 10]} />
                <Controllers />
                <Experience />
                <XRModel />
              </XR>
            </Canvas>
            <Configurator />
          </CustomizationProvider>
        </div>
      );
    }

    export default App;

    import { createContext } from "react";
    import { useContext, useState } from "react";

    const CustomizationContext = createContext({});

    export const CustomizationProvider = (props) => {
      const [shape, setShape] = useState("Box");
      const [color, setColor] = useState("Blue");

      return (
        <CustomizationContext.Provider
          value={{
            shape,
            setShape,
            color,
            setColor,
          }}
        >
          {props.children}
        </CustomizationContext.Provider>
     );
    };

    export const useCustomization = () => {
      const context = useContext(CustomizationContext);
      return context;
    };

    import { OrbitControls } from "@react-three/drei";
    import React from "react";
    const Experience = () => {
      return (
        <>
          <OrbitControls
            maxDistance={8}
            minDistance={1}
            maxPolarAngle={Math.PI / 2.5}
            maxAzimuthAngle={Math.PI / 4}
          />
        </>
      );
    };

    export default Experience;

    import { useCustomization } from "../context/Customization";
    import { useState } from "react";

    const Configurator = () => {
      const { shape, setShape, color, setColor } = useCustomization();

      const [shapeOpen, setShapeOpen] = useState(false);
       const [colorOpen, setColorOpen] = useState(false);
  
      return (
        <div className="configurator">
          <div className="configurator__section">
            <div
              className="configurator__section__title"
              onClick={() => setShapeOpen(!shapeOpen)}
            >
              Shape
            </div>
            {shapeOpen && (
              <div className="configurator__section__values">
                <div
                  className={`item ${shape === "Box" ? "item--active" : ""}`}
                  onClick={() => setShape("Box")}
                >
                  <div className="item__label">Box</div>
                </div>
                <div
                  className={`item ${shape === "Sphere" ? "item--active" : ""}`}
                  onClick={() => setShape("Sphere")}
                >
                  <div className="item__label">Sphere</div>
                </div>
              </div>
            )}
          </div>

          <div className="configurator__section">
            <div
              className="configurator__section__title"
              onClick={() => setColorOpen(!colorOpen)}
            >
              Color
            </div>
            {colorOpen && (
              <div className="configurator__section__values">
                <div
                  className={`item ${color === "Blue" ? "item--active" : ""}`}
                  onClick={() => setColor("Blue")}
                >
                  <div className="item__label">Blue</div>
                </div>
                <div
                  className={`item ${color === "Red" ? "item--active" : ""}`}
                  onClick={() => setColor("Red")}
                >
                  <div className="item__label">Red</div>
                </div>
              </div>
            )}
          </div>
        </div>
      );
    };

    export default Configurator;

    /*
    Auto-generated by: https://github.com/pmndrs/gltfjsx
    Command: npx gltfjsx@6.1.4 public/models/xrmodel.gltf
    */

    import React  from "react";
    import { useGLTF } from "@react-three/drei";
    import { useCustomization } from "./context/Customization";
    import * as THREE from "three";

    const XRModel = (props) => {
      const { nodes } = useGLTF("/models/xrmodel.gltf");
      const { shape, color } = useCustomization();

      const Blue = new THREE.Color(0x0000ff);
      const Red = new THREE.Color(0xff0000);

      return (
        <group {...props} dispose={null} scale={[1, 1, 1]}>
          <mesh geometry={nodes.Cube.geometry} visible={shape === "Box"}>
            <meshStandardMaterial color={color === "Blue" ? Blue : Red} />
          </mesh>
          <mesh geometry={nodes.Sphere.geometry} visible={shape === "Sphere"}>
            <meshStandardMaterial color={color === "Red" ? Red : Blue} />
          </mesh>
        </group>
      );
    };

    export default XRModel;

useGLTF.preload("/models/xrmodel.gltf");

What am I missing? I can view in "object mode" and I can press the ARButton, but when the camera activates it doesn't show anything. Any ideas?

I have tried to follow their own example code as good as I can but still no success.