I have this issue where I want to display a twitter card when clicking the twitter share button imported from 'react-share'.

Even though I set the metadata correctly (imo) whenever I click the twitter share button I only get the link of the image without the preview (like in the attached image).

Currently the metadata is passed correctly since I can see it in the head section of the html of the page.

My question would be:
How can I get this to show the preview of the image instead of only the link. Is there any way to pass the images.url from the generateMetadata down to Metatest component?

Thank you in advance. I would really like the help on this issue!

SERVER COMPONENT:

import Twitter from "./twitter"

export async function generateMetadata() {

    const image = "https://picsum.photos/200/300"

    return {
        twitter: {
            card: 'summary_large_image',
            site: '@DViola37336',
            title: "anydesc",
            description: "anydesc",
            creator: '@DViola37336',
            images: [{
              url: 'https://picsum.photos/200/300',
              alt: 'Preview image for dv',
            }]
          },
    }
}

export default function Metatest({ image }) {
    console.log(image);
  return (
    <>
        <Twitter image={"https://picsum.photos/200/300"}/>
    </>
  )
}

TWITTER COMPONENT:

'use client'

import React from 'react'
import { TwitterShareButton, TwitterIcon } from 'react-share'

function Twitter({image}) {
  return (
    <TwitterShareButton url={image}>
        <TwitterIcon/>    
    </TwitterShareButton>    
  )
}

export default Twitter