Title and Meta Description in not changing in page source with React-Helmet-Async

Question

I am using react-helmet-async to dynamically change the title and meta description data in my ReactJS web app. It changes perfectly on the page, but when I view the 'page source' in my browser, it displays the default title that I set in the index.html file. Now I am explaining the coding process bellow.

I added some meta content on index.html . The contents are given bellow. I have a little confusion also which is if I use react-helmet-async should I fill up the metadata in index.html or leave it blank?

<meta name="description" content="OpenSoft is a 360° digital marketing agency in BD, Offering strategic & innovative solutions for your business's online success."/>

<title>OpenSoft | Digital Marketing & Business Development Agency</title>

1. First wrapped my whole main.jsx with HelmetProvider imported from react-helmet-async.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { HelmetProvider } from "react-helmet-async";

ReactDOM.createRoot(document.getElementById("root")).render(
    <HelmetProvider>
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>
    </HelmetProvider>
);

2. Now I created a component named PageTitle.jsx

import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet-async";

const PageTitle = ({ title, description, canonical }) => {
  return (
    <Helmet prioritizeSeoTags>
      <title>{title} - OpenSoft</title>
      <meta name="description" content={description} />
      <link rel="canonical" href={`https://www.example.com/${canonical}`} />
    </Helmet>
  );
};

PageTitle.propTypes = {
  title: PropTypes.string.isRequired,
  canonical: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
};

export default PageTitle;

1. After that in the route element, suppose AboutPage.jsx I imported PageTitle.jsx and pass the title and description

import React from "react";
import PageTitle from "../components/common-components/PageTitle";
import ScrollToTop from "../components/common-components/ScrollToTop";
import Banner from "../components/page-components/about-page/Banner";
import MajorThings from "../components/page-components/about-page/MajorThings";
import WhoAreWe from "../components/page-components/about-page/WhoAreWe";
import Team from "../components/page-components/about-page/Team";
import MissionVision from "../components/page-components/about-page/MissionVision";

const AboutPage = () => {
  return (
    <ScrollToTop>
      <section className="pt-[80px] min-h-screen">
        <PageTitle
          canonical="about-us"
          title="About Us"
          description="OpenSoft is known as a Digital Marketing and Web Development Agency in BD. We are a leading digital company and full-service creative agency."
        />

        <Banner />
        <MajorThings />
        <MissionVision />
        <WhoAreWe />
        <Team />
      </section>
    </ScrollToTop>
  );
};

export default AboutPage;

This is very useful for SEO. I want to make it to change dynamically and work perfectly.