How to proper rotate object with a 45-degree angle using OrbitControls?

Question

I'm working on a Nextjs project with react-three-fiber and react-three-drei. I want to rotate the object with a 45-degree angle using OrbitControls component, I tried using rotation property but didn't work. So I tried to rotate the whole canvas instead and get the issue like in the video the video. Can someone help me?

https://imgur.com/a/iAESSHt

Here is my code:

"use client";
import { Canvas, useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { Environment, OrbitControls } from "@react-three/drei";

const Earth = ({ isMobile = false }) => {
  const gltf = useLoader(GLTFLoader, "/earth-model/scene.gltf");

  return (
    <group>
      <primitive
        scale={4.15}
        position={[0, 0, 0]}
        rotation={[0, 0, 0]}
        object={gltf.scene}
      />
    </group>
  );
};

const EarthCanvas = (props: any) => {
  return (
    <div {...props} className={`${props.className} size-60`}>
      <Canvas
        className="cursor-pointer  rotate-45 bg-green-300"
        frameloop="demand"
        camera={{
          position: [0, 0, 10],
          rotation: [0, 0, 0],
          fov: 50,
          near: 0.1,
          far: 2000,
        }}
      >
        <Earth />
        <OrbitControls
          enableZoom={false}
          enablePan={false}
          maxPolarAngle={Math.PI / 2.5}
          minPolarAngle={Math.PI / 2.5}
          autoRotate
          autoRotateSpeed={1}
        />
        <hemisphereLight intensity={10} groundColor={"black"} />
      </Canvas>
    </div>
  );
};

export default EarthCanvas;