The React Three Fiber mesh tag is unrecognized in this browser

I am following a 3d portfolio tutorial from Youtube and got caught in this error. Here I am trying to render a mesh but the console is showing a warning that "This element is unrecognized in this browser". The browser is rendering the rest but this part of the code is not getting rendered. Here is the code block:

const Computers = () => {
    const computer = useGLTF("./desktop_pc/scene.gltf");
    console.log(computer);
    return (
        <mesh>
            <hemisphereLight intensity={0.15} groundColor="black" />
            <pointLight intensity={1} />
            <primitive
                object={computer.scene}
                scale={0.75}
                position={[0, -3.25, 1.5]}
                rotation={[-0.01, -0.2, -0.1]}
            />
        </mesh>
    );
};

const ComputersCanvas = () => {
    return (
        <Canvas
            frameloop="demand"
            shadows
            camera={{
                position: [20, 3, 5],
                fov: 25,
            }}
            gl={{ preserveDrawingBuffer: true }}>
            <Suspense fallback={<CanvasLoader />}>
                <OrbitControls
                    enableZoom={false}
                    maxPolarAngle={Math.PI / 2}
                    minPolarAngle={Math.PI / 2}
                />
                <Computers />
            </Suspense>
            <Preload all />
        </Canvas>
    );
};
export default Computers;

And these are the warnings I am getting

1. Warning: <hemisphereLight /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
2. Warning: The tag <hemisphereLight> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
3. Warning: React does not recognize the groundColor prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase groundcolor instead. If you accidentally passed it from a parent component, remove it from the DOM element
4. Warning: <pointLight /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
5. Warning: The tag <pointLight> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
6. Warning: The tag <primitive> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
7. Warning: The tag <mesh> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Can anyone please solve this issue. Thanks!!

Same error happened for me, this is how I fixed it.

You are currently doing export default Computer Update that to export default ComputerCanvas and that should fix it.