Fix incorrect documentation examples for UI components

[HimasreeKolathur24]

Description

This PR fixes multiple issues in the documentation where component usage examples were invalid or did not match the actual component implementations.

Several documented examples contained incorrect JSX syntax, wrong prop names, and mismatches between expected and actual data structures, which made the components difficult to use or caused runtime errors when followed.

Related Issue

Closes #456

Motivation and Context

Accurate documentation is critical for usability and onboarding new contributors. Incorrect examples can lead to confusion, broken implementations, and wasted developer time.

This change ensures that all documented UI components:

• Use valid JSX syntax
• Match the actual component APIs
• Provide copy-paste-ready examples for developers

Screenshots (In case of UI changes):

Not applicable — documentation-only changes.

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests have passed and it does not give any unexpected error for the same.