Angular: Custom service/config for each instance that calls forChild() in library module

Question

so basically what I have is a library that implements an overlay with some predefined styles, some of those styles can be (optionally) overwritten using forRoot(), and what I need is to give the user the possibility of provide new styles for some parallel instances using forChild() and from that point forward; those styles would be applied without affecting other forChild() instances... not sure that I was clear, but I'll try to explain better with an example

the idea is for whoever needs to implement a "custom overlay" (toggletips, tooltips, context menus, etc), would be able to create their own library using this one and provide custom styles for each use

NOTE: my app is made in angular 9, the example in angular 16 (same issue)

stackblitz code example

In the above example I have a library with a basic directive ([bgColor]) that applies a background color calling a "custom service" and if there's nothing there, should be using "global service" (which is what defined in forRoot() or "#FFF" by default)

• in "main.module.ts" I'm importing
  • MyLibModule using forRoot() and "lightblue" as the bgColor
  • TestModuleA which is importing MyLibModule using forChild() with "yellow"
    • this module imports TestModuleC which is importing MyLibModule using forChild() with "cyan"
  • TestModuleB which is importing MyLibModule using forChild() with "lime"
• in "main.component.ts" I have
  • an H1 with the "bgColor" attribute
  • "component-a"
    • an H2 with the "bgColor" attribute
    • "component-c" with the "bgColor" attribute
      • an H3 with the "bgColor" attribute
  • another H1 the "bgColor" attribute
  • "component-b"
    • an H2 with the "bgColor" attribute

now, what I'm expecting is that every directive (where ever used) respects the established background color in each module

for what I should be seeing each element with its corresponding bg color

• H1 in lightblue
  • component-a
    • H2 in yellow
    • component-c in yellow
      • H3 in cyan
• H1 in lightblue
  • component-b
    • H2 in lime

since "TestModuleB" is the latest being imported, "lime" is the color that prevails

in the console you can see that forChild() & forRoot() are being executed twice for every call (not sure why) and the directive is executed 6 times (which is correct) but gets "lime" as the "custom" color every time

FOR CHILD {bgColor: 'cyan'} (* 2)
FOR CHILD {bgColor: 'yellow'} (* 2)
FOR CHILD {bgColor: 'lime'} (* 2)
FOR ROOT {bgColor: 'lightblue'} (* 2)
DIRECTIVE global: lightblue - custom: lime (* 6)

I've being trying to understand why the service is not independent for each module (and its children) and is actually being shared and overwritten with every forChild() call

all the examples I've found are kind of similar, I've moved the providers from here to there, added the lib's service in the providers of any of the "TestModules" and even at the directive's level, but the result is always the same... there's clearly something wrong and I can't figure it out and it's killing me that all the examples online seems to be functional except for what I'm trying to achieve here

any help?