Update WebParts ▶ Concepts & Scenarios docs for SPFx 1.22 (gulp → Heft)

[Ashlesha-MSFT]

This issue tracks updating the following WebParts ▶ Concepts & Scenarios articles
to reflect SPFx v1.22 and the new Heft-based toolchain:

• simplify-adding-web-parts-with-preconfigured-entries.md (Update Document for SPFx 1.22 (gulp to heft) #10544)
• use-fabric-react-components.md
• integrate-with-teams-introduction.md
• use-sp-pnp-js-with-spfx-web-parts.md

Tasks to complete:

1. Replace gulp commands with Heft commands
2. Update references from Office UI Fabric React to Fluent UI React
3. Update code samples for SPFx v1.22 compatibility
4. Ensure all build and preview instructions are accurate
5. Review TypeScript imports to prevent TS2307 module errors
6. Verify images and assets referenced in examples
7. Follow SPFx documentation contribution guidelines