TS，React 18，Chakra UI，React 路由器，React i18next：isActive function 错误？

Question

使用以下技术堆栈时遇到问题：

TS、Chakra-UI、React 18、React 路由器 6、React-i18next

这有效：

   <NavLink to={path}>
      {({ isActive }: { isActive: boolean }) => (
        <Flex
          align='center'
          p='4'
          mx='4'
          role='group'
          borderRadius='99px'
          _hover={{
            bg: 'purple.50',
            color: '#000080',
          }}
          bg={isActive ? 'purple.50' : undefined}
          color={isActive ? '#000080' : undefined}
          {...rest}
        >
          {icon && <Image src={icon} boxSize='25px' mr='4' />}
          <Text fontSize='16px' fontWeight={400}>
            {children}
          </Text>
        </Flex>
      )}
    </NavLink>

我希望以下内容也能正常工作，但错误的是 VS Code：

错误： Type '({ isActive }: { isActive: boolean; }) => JSX.Element' is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>'.ts(2322) Type '({ isActive }: { isActive: boolean; }) => JSX.Element' is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>'.ts(2322)

我尝试使用我的 google-fu，但几个 github 线程并没有让我走上幸福的道路。

  <Link
      as={NavLink}
      to={path}
      style={{ textDecoration: 'none' }}
      cursor='pointer'
      color={'gray.600'}
    >
      {({ isActive }: { isActive: boolean }) => (
        <Flex
          align='center'
          p='4'
          mx='4'
          role='group'
          borderRadius='99px'
          _hover={{
            bg: 'purple.50',
            color: '#000080',
          }}
          bg={isActive ? 'purple.50' : undefined}
          color={isActive ? '#000080' : undefined}
          {...rest}
        >
          {icon && <Image src={icon} boxSize='25px' mr='4' />}
          <Text fontSize='16px' fontWeight={400}>
            {children}
          </Text>
        </Flex>
      )}
  </Link>

任何帮助或专业提示都会很棒！

谢谢