Application protocol section updated checkboxes doesn't show the updated value once a tab switch is done

[mpmadhavig]

Describe the issue: When updating an application, for checkbox (or elements which uses the react prop to initialize values), once the update button is clicked, when you switch to a different tab and come back, the previously updated state of the checkbox will not get reflected. The very initial value will be displayed.

This is happening due to the values assigned to the checkbox fields are getting populated from a react prop field. The checkbox element values are stored at a component level variable. The component level variable get reset with the react prop values, once the component is re-rendered. Prop values does not reflect the new changes from the db, as the component where the values are setting to the react prop does not get re-rendered.

How to reproduce: https://github.com/wso2/product-is/assets/47152272/d097c431-1fb6-4c55-af82-a841c5292212

Expected behavior: When you switch a tab and come back the updated changes should be there.

Environment information (Please complete the following information; remove any unnecessary fields) :

• Product Version: [e.g., IS 7.0.0]
• OS: N/A
• Database: N/A
• Userstore: N/A