Compound components — shared context without props

What does this output?

// Simulates compound component pattern
function createTabs() {
  let activeTab = null;
  const state = { active: null };

  return {
    Root(defaultTab, render) {
      state.active = defaultTab;
      return render(state);
    },
    Tab(id, label) {
      return {
        id, label,
        isActive: () => state.active === id,
        activate: () => { state.active = id; }
      };
    },
  };
}

const Tabs = createTabs();

const tab1 = Tabs.Tab('home', 'Home');
const tab2 = Tabs.Tab('settings', 'Settings');

Tabs.Root('home', () => null); // set default

console.log(tab1.isActive()); // home is active
console.log(tab2.isActive());

tab2.activate();
console.log(tab1.isActive()); // home no longer active
console.log(tab2.isActive());

Correct Output

true
false
false
true

Why this output?