I’m trying to get social share cards to populate across discord, facebook, etc and I’ve not had success in getting the card to populate.

This is my import
import { Helmet } from 'react-helmet-async';

In my view component I have the following

export default function SharePage({ }) {
const [images, setImages] = useState([]);

  return (
    <Box>
      <Helmet>
        <title>Hots&Cots</title>
        <meta name="description" content="Hots&Cots: Your source for Barracks and DFAC Reviews" />
        <meta name="keywords" content="military, barracks, dfac" />
        <meta name="author" content="Hots&Cots" />
        <meta property="og:title" content={`${renderFacilityType(hash, shareData)}`} />
        <meta property="og:description" content="Hots&Cots: Your source for Barracks and DFAC Reviews" />
        <meta property="og:image" content={`${images[0]}`} />
        <meta property="og:url" content="https://feed.hotscots.app/" />
        <meta name="twitter:title" content={`${renderFacilityType(hash, shareData)}`} />
        <meta name="twitter:description" content="Hots&Cots: Your source for Barracks and DFAC Reviews" />
        <meta name="twitter:image" content={`${images[0]}`} />
        <meta name="twitter:card" content={`${images[0]}`} />
      </Helmet>
</Box>
);


}

• I’ve confirmed in the console that an image is obtained in images and is a valid image that can be accessed.
• I’ve hardcoded image from the internet unrelated to my work
• I’ve tried checking on social share preview https://socialsharepreview.com/?url=https://hots-cots-web.vercel.app/share#b44224

Social share does give me the following, but not sure how to resolve this especially since og:description is present.

Image
 og:image can't be found at the defined URL
 The ratio of your og:image isn't optimal 
 Image size is optimal (<8mb)

 The og:description metatag missing

Any suggestions to move forward?