Using overlays with next/link

[lalit2005]

Can you please tell how to use next/link with overlays in Mantine here 👇

import React from 'react';
import { Card, Image, Text, Overlay } from '@mantine/core';

function Demo() {  
  return (
    <div style={{ width: 340, margin: 'auto' }}>
      <Card shadow="sm">
        <Image
          src="https://images.unsplash.com/long-image-url.jpg"
          height={160}
          alt="Noway"
        />

        <Text weight={500} size="lg">
          You&apos;ve won million dollars in cash
        </Text>
        
        <Text style={{ marginTop: 10 }} size="sm">
          Please click anywhere on this card to claim your reward, this is not a fraud, trust us
        </Text>

        <Overlay
          opacity={0}
          component="a"
          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
          target="_blank"
        />
      </Card>
    </div>
  );
}

https://mantine.dev/core/card/#link-overlay

[rtivital]

It should be something like this

<Overlay component={Link} to="/mantine" />

This works with react-router-dom Link component, haven't tested with next link though