CleanUrls not working on my Firebase project

Question

I have a website with 2 html pages. index.html and blog.html. In blog.html I am referencing the #sections on the index.html using tags like index.html#aboutus. When I access the home page(index.html) using the domain on the browser, links open as domain.com#aboutus, domain.com#contact. However, when I reach Blog page from the home page, every page link from thereon opens as domain.com/index.html#aboutus and so on.

code on Blog.html

<div class="hidden space-x-12 md:flex">
<a href="index.html#Aboutus" class="hover:text-gray-400">About Us</a>
<a href="index.html#services" class="hover:text-gray400">Services</a>
<a href="index.html#contact" class="hover:text-gray-400">Contact</a>
<a href="#" class="hover:text-gray-400">Blog</a>
</div>

I've also used CleanUrls option in firebase.json file, which isn't helping either.

Can someone please help me?

{
  "database": {
    "rules": "database.rules.json"
  },
    "hosting": {
      "public": "public",
      "cleanUrls": true,
      "trailingSlash": false,

      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ]
      
    }
  }