Why aren't my React Helmet meta tags being prioritized correctly for social media thumbnails?

Question

My goal is to produce a thumbnail whenever a link is shared on social media. The problem I'm having is that when I check my source code, under the head> tag, the first tag I see is the title> tag; after that, there are a ton of styles>/styles>, and my meta> tags, which were injected by helmet, are placed at the bottom of the head>tag.

So I guess bcoz of priority issue I'm unable to see any thumbnail when I share link, but when I trigger my helmet component values(which are dynamically changes and handled by state) from particular button then i can clearly see that the values inside "meta og" tags are changing but due to priority issue I'm not able to see results

here's my helmetComponent

import React from "react";
import { Helmet } from "react-helmet";
import { useSelector } from "react-redux";
import { shareState } from "../ShareModal/reduxSlice";

export default function App() {
  const { title, description, img, link } = useSelector(shareState);
  return (
    <>
      <Helmet>
      <meta name="title" property="og:title" content={title}></meta>
        <meta name="description" property="og:description" content={description}></meta>
        <meta name="image" property="og:image" content={img}></meta>
        <meta property="og:url" content={link} />
        <meta property="og:type" content="website" />
      </Helmet>
    </>
  );
}

which then passed to main file App.js

import "./App.css";
import { Routes, Route } from "react-router-dom";
import Root from "./Components/Routes/Root";
import Footer from "./Components/components/Footer/Footer";
import HelmetComponent from "./Components/components/Helmet/App";

function App() {
  return (
    <>
      <HelmetComponent />
      <Routes>
        <Route>
          <Route path="*" element={<Root />} />
        </Route>
      </Routes>
      <Footer />
    </>
  );
}

export default App;

I'd tried placing "helmetComponent" at the top of my App.js file, which consists of all other components, so that items inside my helmetComponent may get top priority.

This is what I get when I share the link on WhatsApp: first line hold: the tag value:: which is the title of my site, second line holds:: the URL , that's it ](https://i.stack.imgur.com/omF1f.png)

I'm expecting to get thumbnails when I share links with others.

I'd also tried using small-sized images; maybe the images right now I'm passing are way too big to be shown in thumbnails, but before that, I'm not even receiving any title or description.

Possibly thing that the issue is priority basis,if anyone knows help me out coz I'm facing this issue from long time.`