How to wrap next-intl link wrapper over Next.js link with Headless UI DataInteractive

Question

I have a link component that simply wraps Next.js link in Headless.DataInteractive component.

import * as Headless from '@headlessui/react'
import NextLink, { type LinkProps } from 'next/link'
import React, { forwardRef } from 'react'

export const Link = forwardRef(function Link(
  props: LinkProps & React.ComponentPropsWithoutRef<'a'>,
  ref: React.ForwardedRef<HTMLAnchorElement>
) {
  return (
    <Headless.DataInteractive>
      <NextLink {...props} ref={ref} />
    </Headless.DataInteractive>
  )
})

But when I want to use next-intl Link component instead of NextLink as folows

import * as Headless from '@headlessui/react'
import { type LinkProps } from 'next/link'
import {Link as IntlLink} from '../i18n/routing';
import React, { forwardRef } from 'react'

export const Link = forwardRef(function Link(
  props: LinkProps & React.ComponentPropsWithoutRef<'a'>,
  ref: React.ForwardedRef<HTMLAnchorElement>
) {
  return (
    <Headless.DataInteractive>
      <IntlLink {...props} ref={ref} />
    </Headless.DataInteractive>
  )
})

and my routing file:

import {defineRouting} from 'next-intl/routing';
import {createNavigation} from 'next-intl/navigation';

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: ['en', 'uk', 'pl'],

  // Used when no locale matches
  defaultLocale: 'en'
});

// Lightweight wrappers around Next.js' navigation APIs
// that will consider the routing configuration
export const {Link, redirect, usePathname, useRouter, getPathname} =
  createNavigation(routing);

I got the folowing error:

Error: Passing props on "Fragment"!

The current component <DataInteractive /> is rendering a "Fragment".
However we need to passthrough the following props:
  - ref
  - onFocus
  - onBlur
  - onPointerEnter
  - onPointerLeave
  - onPointerDown
  - onPointerUp
  - onClick
  - data-headlessui-state

You can apply a few solutions:
  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".
  - Render a single element as the child so that we can forward the props onto that element.

And I have no clue how to fix this error...

I tried some fixes, but I still don’t understand how to resolve this issue.