Leches shares useControls; can't have multiple, distinct instances

[andretchen0]

Bug description

All controls created using useControls are added to all instances of <TresLeches /> even if they're in separate files.

Expected behavior

Allow multiple, separate instances of Leches. Don't share state across multiple, separate files.

Reproduction

StackBlitz

Solution?

Maybe create and return a unique controls instance from useControls that closes over the current controls state.

const controls = useControls({
  wireframe: false,
})

controls.useControls( /* ... add more controls to this instance */ )

Then use like

<TresLeches :controls="controls" />

Screenshot

Context

We use Leches for Cientos' docs and often have multiple separate examples of functionality in a given docs page. But we can't have multiple Leches menus on a given page without running into this bug.