Firestore configuring offline data access or cache with React application

Trying to enabling cache in React application. I have follow this answer link but it does not seem like working.

firebase.js

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);

// enabling cache
enableIndexedDbPersistence(db);

const auth = getAuth(app);
const analytics = getAnalytics(app);

export { db, auth };

Download.js

import { db } from "../lib/firebase";
  const getDocumentData = async () => {
     const docRef = doc(db, "section1", selectedHHId);

      const q = query(
        collection(db, selectedSection),
        where("doc_id", "==", docRef)
      );

      const querySnapshot = await getDocs(q);
      const source = querySnapshot.metadata.fromCache
        ? "local cache"
        : "server";
     //this always print "Data came from server"
      console.log("Data came from " + source);

  };