如何在React中拖动旋转木马

import React from 'react';
import Draggable from 'react-draggable';
import { Carousel } from 'react-rotary-carousel';
import 'react-rotary-carousel/lib/react-rotary-carousel.css';

const CarouselComponent = () => {
  return (
    <Carousel
      radius={200}
      rotationAngle={90}
      itemSize={100}
    >
      {/* 添加旋转木马的内容 */}
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      {/* ... */}
    </Carousel>
  );
};

const CarouselComponent = () => {
  return (
    <Draggable axis="x" bounds="parent">
      <Carousel
        radius={200}
        rotationAngle={90}
        itemSize={100}
      >
        {/* 添加旋转木马的内容 */}
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        {/* ... */}
      </Carousel>
    </Draggable>
  );
};

const CarouselComponent = () => {
  return (
    <Draggable axis="x" bounds="parent">
      <Carousel
        radius={200}
        rotationAngle={90}
        itemSize={100}
      >
        <div>
          <img src="image1.jpg" alt="Item 1" />
          <p>Item 1</p>
        </div>
        <div>
          <img src="image2.jpg" alt="Item 2" />
          <p>Item 2</p>
        </div>
        <div>
          <img src="image3.jpg" alt="Item 3" />
          <p>Item 3</p>
        </div>
        {/* ... */}
      </Carousel>
    </Draggable>
  );
};

const App = () => {
  return (
    <div>
      {/* 其他内容 */}
      <CarouselComponent />
      {/* 其他内容 */}
    </div>
  );
};