Using <PresentationControls/> with Drei and pivot point

Questions
1

Hello,

I’m trying to get an object (MyObject) to rotate around a predefined point – so I wrapped it in a group as a child, and offset it from the group. This works giving me a simple orbit.

I’d like to ALSO be able to have the object rotate on its own axis on mousedrag. I was able to get it to rotate like this using the rotateOnAxis() method but I’m not sure how to implement mousedrag – however, I’d really like to use the PresentationControls from drei instead out of the box. When I execute this code, the PresentationControls rotate the object around the group parent. Is there a way I could get PresentationControls to manipulate MyObject on its own axis?

import {useFrame, useThree} from "@react-three/fiber";
import {useRef, useState, useEffect} from "react";
import MyObject from "./models/MyObject";
import {PresentationControls} from '@react-three/drei';

export default function Carousel(props) {

    const universe = useRef();
    const [position, setPosition] = useState({x: 0, y:0, z:10});
    const {camera} = useThree();
    const [carouselMoving, setCarouselMoving] = useState(false);
    
useFrame(() => {  
      if(carouselMoving) {
      universe.current.rotation.y += 0.01;
      }
    });

    useThree(({camera}) => {
      camera.position.z = 15;
    });

    return (
      <group ref={universe} position={[0, 0, 0]} onClick={() => {setCarouselMoving(!carouselMoving)}}>
   <PresentationControls 
   config={{ mass: 3, tension: 250 }}
   snap={ false}
   rotation={[0, 0, 0]}
   polar={[-Math.PI / 3, Math.PI / 3]}
   azimuth={[-Math.PI / 1.4, Math.PI / 2]}
   cursor={false}
  >
 <MyObject x={position.x} y={position.y} z={position.z}/>

 </PresentationControls>
      </group>

    )
  }

Here’s a GIF of the behaviour im getting now, where the PresentationControls rotate the object around the parent
Animation