A Link wrapper for Chakra-UI and React Router v6

Link.tsx

import React from 'react'

import { ComponentWithAs, Link as ChakraLink, LinkProps as RawChakraLinkProps } from '@chakra-ui/react'
import { Link as ReactRouterLink } from 'react-router-dom'

type Props = Omit<React.ComponentPropsWithoutRef<ComponentWithAs<typeof ReactRouterLink, RawChakraLinkProps>>, 'as'>

const Link: React.FC<Props> = ({ children, ...props }) => (
  // eslint-disable-next-line react/jsx-props-no-spreading
  <ChakraLink as={ReactRouterLink} {...props}>
    {children}
  </ChakraLink>
)

export default Link