antd react tour 引导式访问组件解决ref获取不到的问题

我是用了Tab组件，tab分1,2,3步骤，直接用ref不对。所以我找了这种方式，使用原生获取dom

  const [ref1, setRef1] = useState(null);
  const [ref2, setRef2] = useState(null);
  const [ref3, setRef3] = useState(null);
  const [open, setOpen] = useState<boolean>(false);
  useEffect(() => {
    setRef1(document.getElementsByClassName('ant-tabs-tab')[0]);
    setRef2(document.getElementsByClassName('ant-tabs-tab')[1]);
    setRef3(document.getElementsByClassName('ant-tabs-tab')[2]);
  }, [])

  const steps: TourProps['steps'] = [
    {
      title: '',
      description: `1`,
      target: () => ref1,
      placement: 'bottom',
    },
    {
      title: '',
      description: `2`,
      target: () => ref2,
    },
    {
      title: '',
      description:
        `3 also support database data for reliable, efficient, secure and scalable data management.`,
      target: () => ref3,
      placement: 'bottom',
      nextButtonProps: {
        children: <span>Got It</span>,
      },
    },
  ];
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: 'Local',
      children: (
        <LocalData
        
        ></LocalData>
      ),
    },
    {
      key: '2',
      label: 'Cloud',
      children: (
        <CloudStorage
        
        ></CloudStorage>
      ),
    },
    {
      key: '3',
      label: 'SQL',
      children: (
        <SqlDatabases
        
        ></SqlDatabases>
      ),
    },
  ];