R3F - PerspectiveCamera seems broken or objets are further away than they should

I have a small problem with R3F and after investigating and searching for a solution I end up with nothing, so I'll try here.

The problem is with the PerspectiveCamera, I don't know why, if is something related with the declaration or with R3F itself but no matter how I change positions of the meshes or the camera, there is no way to bring closer the meshes to the camera:

My scene

I'm following different tutorials two see why is happening this but I didn't find an answer yet, this is how the scene should be (based in the last tutorial I've found):

Tutorial scene

This is the code, is exactly the same code for both scenes:

import { Canvas } from '@react-three/fiber'
import { PerspectiveCamera } from '@react-three/drei';
import * as THREE from 'three'

function App() {

    return (
        <Canvas>
            <PerspectiveCamera makeDefault position={[0,1,5]} />
            
            <mesh position={[0,0.5,0]}>
                <sphereGeometry args={[0.5, 32, 32]} />
                <meshStandardMaterial color='#dddddd' />
            </mesh>

            <mesh rotation={[-Math.PI/2,0,0]}>
                <planeGeometry args={[7,7]} />
                <meshStandardMaterial color='#1ea3d8' />
            </mesh>

            <ambientLight args={['#ffffff', 1]} />
        
        </Canvas>
    )
}

export default App;

Is there something that I'm missing? I hope the problem is not caused by a stupid thing that I'm not seeing right now.. Thanks for your help

YES... I forgot the renderer size:

return (
<div style={{width: window.innerWidth, height: window.innerHeight }}>
<Canvas>
<PerspectiveCamera makeDefault position={[0,1,5]} />
<mesh position={[0,0.5,0]}>
<sphereGeometry args={[0.5, 32, 32]} />
<meshStandardMaterial color='#dddddd' />
</mesh>
<mesh rotation={[-Math.PI/2,0,0]}>
<planeGeometry args={[7,7]} />
<meshStandardMaterial color='#1ea3d8' />
</mesh>
<ambientLight args={['#ffffff', 1]} />
</Canvas>
</div>
)