Ghost RigidBody after using setNextKinematicRotation

Im using this below hook to rotate RigidBody’s the mess is colliding perfect, but its leaving a ghost collider after first frame. you can also view the entire repo here GitHub - steelx/beat-blocks-js: ThreeJs hurdles game with Rapier physics lib

export const useSimpleRotation = (
	ref: RefObject<RapierRigidBody>,
	speed = 1,
) => {
	useFrame((state) => {
		const time = state.clock.getElapsedTime();
		const eulerRotation = new Euler(0, time * speed, 0);
		const quaternion = new Quaternion();
		quaternion.setFromEuler(eulerRotation);
		ref.current?.setNextKinematicRotation(quaternion);
	});
};

also another issue I’m facing is shadows wont appear after a certain distance.
Below is my lights.tsx file which I use inside direct child of Canvas.

export default function Lights() {
	return (
		<>
			<directionalLight
				intensity={1}
				position={[10, 10, 1]}
				shadow-mapSize={[512, 512]}
				shadow-camera-near={0.5}
				shadow-camera-far={300}
				shadow-camera-top={10}
				shadow-camera-right={10}
				shadow-camera-bottom={-10}
				shadow-camera-left={-10}
				castShadow
			>
				<orthographicCamera
					attach="shadow-camera"
					args={[-5, 5, 5, -5, 0.5, 300]}
				/>
			</directionalLight>
			<hemisphereLight intensity={0.225} />
			{/* <ambientLight intensity={0.25} /> */}
		</>
	);
}

please view the video here →

Manged to fix Shadows with CSM lib. Thanks for @mjurczyk for pointing me at this lib.
“three-csm” fix: shadows with CSM lib by steelx · Pull Request #2 · steelx/beat-blocks-js · GitHub