Weird behavior from Checkbox tree

I want to use a checkbox tree to exclude a list of resources from either or both of two options (Time Entry and Billables Race). However, any time I select the person under Time Entry, it also selects them from Billables Race.

I want to be able to independently exclude them from only one option. For example, exclude them from the Billables Race, but still require them to enter time. Why can I not seem to get this to work? Below is my code which generates the JSON for the checkbox tree.


var optionChildren = resource => {
return {
label: resource,
value: resource,

var optionTree = ["Time Entry", "Billables Race"].map( option => {

/* The reason why I am rebuilding this, is so that I am not pointing to the same data
* I thought that might be the reason for the weird behavior, but it didn't seem to help */

var children = child => {
return {
label: child.label,
value: child.value,
return {
label: option,
value: option,
children: children,

return optionTree;

Very interesting!

Examining the state of the checkboxTree component with this setup shows that there is actually only one option "checked":

I think the issue may stem from the fact that is identifying the child as a single object (not necessarily a single reference) by value name. i.e. there isn't checked state on the item's value in the tree but a lookup of "value" based on what is "checked" -- Now, there is a checkedPathArray that shows the correct selection (I made the Time Entry check, and the Billables Race entry was the ghost checkmark) but I don't think this is something that you can workaround without changing the value property of the child when creating the tree.