Reactjs Antd Carousel 从类组件转为函数式

我有以下code个

   class Gallery extends Component {
      state = {
        media: null,
        nav: null
      };

     componentDidMount = () => {
       this.setState({
        media: this.media,
        nav: this.nav
       });
    };

     render() {
      return (
       <>
        <Carousel
          asNavFor={this.state.nav}
          touchMove={true}
          dots={false}
          ref={(carousel) => {
            this.media = carousel;
          }}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
        </Carousel>
        <Carousel
          slidesToShow={2}
          asNavFor={this.state.media}
          ref={(carousel) => (this.nav = carousel)}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
        </Carousel>
      </>
     );
    }
   } 

它是基于类组件编写的，请帮助我将其转换为功能组件

我试了this次，但效果不太好.当我们更改缩略图库时，主库没有更改.如果我将缩略图或按钮从1更改为2，则主幻灯片也应从1更改为2.但它没有改变

    const Gallery = () => {
      const [media, setMedia] = useState(null);
      const [nav, setNav] = useState(null);
      const carousel = useRef(null);

      const handleNext = () => {
        carousel.current.next();
      };

      const handlePrev = () => carousel.current.prev();

     useEffect(() => {
       setMedia(null);
       setNav(null);
     }, [media, nav]);
     return (
       <>
         <Carousel asNavFor={nav} touchMove={false} dots={false} ref= 
     {carousel}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
      </Carousel>

      <Button onClick={handlePrev}> prev </Button>
      <Button onClick={handleNext}> next </Button>
      <Carousel
        slidesToShow={2}
        asNavFor={media}
        ref={carousel}
      >
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
       </Carousel>
      </>
     );
    };

请帮我解决这个问题，谢谢:)