Dynamic Meta Tags not showing on social platforms using Angular Universal deployed on Firebase Cloud Hosting

I've deployed my Angular universal project to Firebase hosting using Firebase Cloud Functions.

When I inspect the HTML head it seems like the metatags are able to dynamically change.

But when I tried to share the dynamic link to social media platforms it does not display according to the metatags.

Home-page Metatags from browser:

Dynamic-page Metatags from browser:

I used a SEO service:

constructor(private _title: Title, private meta: Meta) {}

  defaultTitle() {
    this._title.setTitle(`River Valley Irregulars: ${this.title}`);
  }

  defaultMetaTags() {
    this.updateMetaTags(this.title, this.description, this.img, '');
  }

  updateTitle(title: string) {
    this._title.setTitle(`RVI: ${title}`);
  }

  updateMetaTags(title: string, description: string, img: string, url: string) {
    const tags = [
      { name: 'robots', content: 'index, follow' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      {
        name: 'apple-mobile-web-app-status-bar-style',
        content: 'black translucent',
      },
      { name: 'apple-mobile-web-app-title', content: 'index, follow' },
      // OPEN GRAPH
      { name: 'og:type', content: 'website' },
      {
        name: 'og:title',
        content: title,
      },
      {
        name: 'og:description',
        content: description,
      },
      {
        name: 'og:image',
        content: img,
      },
      { name: 'og:url', content: this.url + url },
      { name: 'og:site_name', content: 'River Valley Irregulars' },

      // TWITTER CARD
      { name: 'twitter:card', content: 'summary' },
      { name: 'twitter:image', content: img },
      { name: 'twitter:title', content: title },
      { name: 'twitter:site', content: '@rvi' },
      { name: 'twitter:creator', content: '@rvi' },
      { name: 'twitter:description', content: description },
    ];

    tags.forEach((meta) => {
      this.meta.updateTag(meta);
    });
  }

app.component.ts:

export class AppComponent {
  constructor(private seo: SeoService) {
    this.seo.defaultTitle();
    this.seo.defaultMetaTags();
  }
}

dynamic page component:

ngOnInit() {
    this.route.paramMap.subscribe((params: ParamMap) => {
      const id = params.get('id');
      const productRef = doc(this.firestore, `opportunities/${id}`);
      this.opportunity$ = docData(productRef, { idField: 'id' }).pipe(
        traceUntilFirst('firestore')
      );
      /* UPDATE META TAGS */
      this.opportunity$.subscribe((data) => {
        this.seo.updateTitle(`${data.organization} - ${data.title}`);
        this.seo.updateMetaTags(
          `${data.organization} - ${data.title}`,
          data.description,
          data.img_url,
          this.router.url
        );
      });
    });
  }

I've been stuck here for some time and redeploying many many times.