I set up a new Project with react, react-three-fiber and typescript.
I am using the basic demo example from here: https://codesandbox.io/s/basic-demo-rrppl0y8l4?file=/src/App.js:146-981

The canvas code:

<div style={{borderStyle: "solid", padding:5, width: "50vw", height: "50vh" }}>
	<Canvas shadows>
		<ambientLight intensity={0.5} />
		<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
		<pointLight position={[-10, -10, -10]} />
		<Box position={[-1.2, 0, 0]} />
		<Box position={[1.2, 0, 0]} />
		<OrbitControls />
	</Canvas>
</div>

Expected behavior: Two boxes showing with shadow and correct lighting.

Current behavior: See Image, wrong lighting. No shadows.

My Package.json:
"dependencies": {
"@react-three/drei": "9.74.6",
"@react-three/fiber": "8.13.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.39",
"@types/react": "^18.2.18",
"@types/react-dom": "^18.2.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"reactflow": "^11.7.4",
"three": "^0.155.0",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},

I already tried the newest version and an older version of react-three-fiber. Maybe I need some other version?