Encapsulate SyncButton as a Widget to Simplify Implementation

**Description:**
Currently, the SyncButton handler function is passed through ui:options in rjsf, which is not ideal as ui:options are meant for rendering guidance. This adds unnecessary complexity to the code.

To address this, we need to encapsulate the SyncButton into a custom widget (e.g., SyncButtonWidget). Doing so will not only simplify the logic but also make it more maintainable and scalable, especially as we plan to add the SyncButton to additional locations such as the Operation Review Page.

This task includes:
- Creating a SyncButton widget that handles the sync logic.
- Refactoring the existing implementation to remove the use of ui:options for passing handler functions .
- Change the button text to "Sync from Contacts" or "Sync from Administration"

Start by locating the existing SyncButton handler passed through ui:options and trace where that option is consumed. Encapsulate the sync logic in a custom SyncButton widget, remove handler passing through ui:options, and verify the button text distinguishes “Sync from Contacts” from “Sync from Administration”.

Written by the indexing model from the issue text.