Why is the 3D model not displayed correctly in threejs?

I am trying to implement a Saturn model on the web with the help of three and @react-three/fiber. I managed to display Saturn, but I have two problems:

1. The rendering of the planet itself is problematic and the image jumps and crashes like old televisions.
2. The ring is not displayed and it is displayed only if I rotate the planet itself, and in that case the rings are elongated.

Sphere.js

import React, { useRef } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useFrame, useLoader } from "@react-three/fiber";

const Sphere = () => {
  const planet = useRef();

  const { nodes } = useLoader(GLTFLoader, "files/models/saturn.glb");

  useFrame(() => (planet.current.rotation.y += 0.0002));
  React.useEffect(()=>{
    console.log(nodes)
  })
  return (
    <>
      {/* */}
      <mesh castShadow receiveShadow  geometry={nodes.RingsTop.geometry} material={nodes.RingsTop.material} />
      <mesh castShadow receiveShadow
        ref={planet}
        visible
        position={[0, 0, 0]}
        // Adding data from Saturn001.glb to the geometry and material of the sphere
        geometry={nodes.Saturn001.geometry}
        material={nodes.Saturn001.material}
      />
      <mesh castShadow receiveShadow geometry={nodes.RingsBottom.geometry} material={nodes.RingsBottom.material} /> 
    </>
  );
};

export default Sphere;

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import CameraControls from "../../camera"
import Sphere from "./Sphere";
import SkyBox from "../../skyBox";

export default function SATURN() {
  return (
      <Canvas className="canvas">
        <CameraControls />
        <directionalLight intensity={1} />
        <ambientLight intensity={0.6} />
        <Suspense fallback="loading">
          <Sphere />
        </Suspense>
        <SkyBox />
      </Canvas>
  );
}