{/* Error display */}
        {error && (
          <div className="error-message">
            <p>{error}</p>
            {error.includes('index') && (
              <>
                <p>This query requires a Firestore index.</p>
                <a
                  href={`https://console.firebase.google.com/v1/r/project/${YOUR_PROJECT_ID}/firestore/indexes`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="index-link"
                >
                  Click here to create the required index
                </a>
              </>
            )}
          </div>
        )}enter image description here

enter image description here