Placing an object in the top-left while maintaining responsiveness

[allennghayoui]

I am new to r3f and I would like to place a box on the top left of the screen without hard-coding position values because I need it to be responsive.

This is what I have with position={[0, 0, 0]} on the mesh:

I tried using the innerWidth and innerHeight properties of the window but when I do that the box goes completely off-screen.
I printed the innerWidth and innerHeight values they were 1699 and 575 respectively if that is useful.

This is my code:

'use client'

import {Canvas} from '@react-three/fiber';

const Cube = () => {

    return (
        <mesh position={[0, 0, 0]}>
            <boxGeometry args={[5, 5, 0]} />
            <meshStandardMaterial />
        </mesh>
    )
}

export default function R3f() {
    return (
        <div className=''>
            <Canvas>
                <Cube />
            </Canvas>
        </div>
    )
}