Properties of camera not changing

[tired gate]

hey I am messing with camera stuff but it has no effect what could be the problem ? ```jsx
import React, {useRef} from 'react'
import "../src/App.css"
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { Canvas, useFrame} from '@react-three/fiber'
import { BoxGeometry } from 'three';
import { PerspectiveCamera } from '@react-three/drei';

function Camera() {
// Create a reference to the camera object.
const cameraRef = useRef();

// Set the position of the camera.
return (
<PerspectiveCamera ref={cameraRef} aspect={10} far={1000} fov={1000}/>
);
}

const Box = ({_position})=> {
// Create a reference to the mesh object.
const meshRef = useRef(null);

return (
<mesh ref={meshRef}>
<boxGeometry args={_position} />
</mesh>
);
}

function App() {
return (
<Canvas className='_canvas' >
{Camera()}
<pointLight position={[10, 10, 10]} />
<mesh>

</mesh>
{Box([10, 10, 10])}
</Canvas>

)
}

export default App ````

[tired zenith]

Are you familiar with React? This isn't how you would use components. See:

• https://react.dev/
• https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

<Camera />
<Box _position={[10, 10, 10]} />

Note that args gets passed to new THREE.BoxGeometry(...args), so you're creating a box with a width, height, and depth of 10 as per https://threejs.org/docs/#api/en/geometries/BoxGeometry.

[tired gate]

for some reason this does not give the desiredOutput

the box is not visible

I know they mean the exact same thing

but they are not giving the same output

also can you tell y camera settings arent working

[tired gate]

hey so I made some changes but I still cant manipulate the camera ```jsx
import React, {useEffect, useRef} from 'react'
import "../src/App.css"
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { Canvas, useFrame} from '@react-three/fiber'
import { BoxGeometry } from 'three';
import { PerspectiveCamera } from '@react-three/drei';

function App() {

useEffect(()=>{
}, [])

return (
<Canvas className='_canvas' >
<PerspectiveCamera aspect={100} far={2000} fov={1000}/>
<pointLight position={[10, 10, 10]} />
<mesh>
<boxGeometry args={[1, 1, 1]} rotateZ={100} rotateX={1000} rotateY={400}/>
</mesh>

</Canvas>

)
}

export default App ```

I can manipulate the box

[tired zenith]

You'll need <PerspectiveCamera makeDefault />.

[tired gate]

thanks