[fluent-ui] Same property named Boolean Checkbox bug

[fadhilx]

Prerequisites

• [x] I have read the documentation;
• [x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [x] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

when there is two or more object that have same key with type boolean(which will become checkbox), when you click the checkbox thats not the first one, it will change the state of the first checkbox.

Steps to Reproduce

1. open this playground link or use this schema:

   {
   "properties": {
   "lorem": {
     "title": "Lorem",
     "type": "object",
     "properties": {
       "enabled": {
         "type": "boolean",
         "default": true
       }
     }
   },
   
   "ipsum": {
     "title": "Ipsum",
     "type": "object",
     "properties": {
       "enabled_2": {
         "type": "boolean",
         "default": true
       },
       "enabled": {
         "title":"enabled <------- (CLICK ME)",
         "type": "boolean",
         "default": true
       }
     }
   },
   
   "sit": {
     "title": "Sit",
     "type": "object",
     "properties": {
   
       "enabled": {
         "title":"enabled <------- (Or ME)",
         "type": "boolean",
         "default": true
       },
       "otherCheckbox": {
         "type": "boolean",
         "default": true
       }
     }
   }
   }
   }

   make sure that you use fluent ui.

2. click the second or enabled's checkbox on the UI
3. you can change to any key, name it to what ever you want as long it have the same property name with other object property

Expected behavior

the next same property should be able to be click, cause it in different object not duplicated, i want to make this kind of output

{
  "weapon 1": {
    "enabled": true
  },
  "weapon 2": {
    "enabled": false
  },
  "weapon 3": {
    "enabled": true
  }
}

Actual behavior

click at the next same property name checkbox cause it unchangeable and will change the first one

Version

{
   ...
    "@fluentui/react-northstar": "^0.51.2",
    "@rjsf/core": "^2.4.0",
    "@rjsf/fluent-ui": "^2.4.0",
   ...
}

[fadhilx]

i found a solution for this i found out that checkbox id attribute causing that behavior

add type: "object" key as schema root property

{
  "type":"object", //<----add this
  "properties": {
    "lorem": {
      "title": "Lorem",
      ...

just add that to fix the behavior

at this point im not sure if its a bug or it just me who write invalid JSON format.

[ar-naseef]

Has anybody found a solution for this? I am also facing this issue with Fluent UI.!