How to get Image Previews When React Website is Shared?

Question

I am using react-helmet and react-helmet-async to preview image. I have setup HelmetProvider in index.js like this. To configure i have used react-helmet-async.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store/configStore";
import { HelmetProvider } from "react-helmet-async";

const root = ReactDOM.createRoot(document.getElementById("root"));
const helmetContext = {};

root.render(
  <HelmetProvider context={helmetContext}>
    <Provider store={store}>
      <App />
    </Provider>
  </HelmetProvider>
);

I have creacted MetaDetails component.

import React from "react";
import { Helmet } from "react-helmet";

const MetaDetails = ({ title, description, imageUrl, webUrl }) => {
  return (
    <Helmet>
       {/* Open Graph / Facebook */}
       <meta property="og:type" content="website" />
       <meta
          property="og:url"
          content={webUrl}
       />
       <meta property="og:title" content={title} />
       <meta
          property="og:description"
          content={description}
       />
       <meta
         property="og:image"
         content={imageUrl}
       />
       <meta property="og:image:width" content="1200" />
       <meta property="og:image:height" content="630" />

       {/* Twitter */}
       <meta
          property="twitter:card"
          content="summary_large_image"
       />
       <meta
          property="twitter:url"
          content={webUrl}
       />
       <meta
          property="twitter:title"
          content={title}
       />
       <meta
          property="twitter:description"
          content={description}
       />
       <meta
          property="twitter:image"
          content={imageUrl}
       />
    </Helmet>
  );
};

export default MetaDetails;

I have used this component in AppRoute.js like this

<Route
   path="/"
   element={
      <>
         <Metadetails
             title='Test Site'
             description='Description of Test Site'
             webUrl='https://solwin-lime.vercel.app/'
             imageUrl='https://static-cse.canva.com/_next/static/assets/og_image_w1200xh630_dd5da326a6b5f08dfa74b06d43ab9a1dc64f86746a051a32c8be571af4eefd0a.png'
         />
         <HomeHeroSection />
         <Games />
         <LastPlayed />
      </>
/>

But when i test it on Twitter, Facebook etc. to see Preview its not showing image.