TailwindCSS: Generating variants through "matchVariants" does not generate correct CSS for nested groups and peers

I tried generating variants which suits the needs of my app, however, I have nested group classes which require names to avoid ambiguity. The generated classes works fine as long as no name suffix, like "group/any-name-here", is added to the group variant within the element's class.

In tailwind.config.js, I imported "tailwind/plugin" to access the "matchVariant" function as provided by core tailwind.
.
Here is the current snippet I have created...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 matchVariant("group-status", (value) => `:merge(.group[data-status=${ value }]) &`, {
    values: {
       active: "active",
       inactive: "inactive"
    }
 });

<!-- end snippet -->

I want to know why and how to add in the generated styles; because in core variants from tailwind such as hover the group variant name suffix is appended at the end of the parent group selector, as shown below:

Sample from Core Tailwind Variant CSS

While the variants generated tend to not have appended the respective group variant name suffix:

Sample of Generated Variant CSS

You'd need to use the modifier value from the second parameter passed to the function parameter in matchVariant(), just like in Tailwind core:

matchVariant(
  'group-aria',
  (value, { modifier }) =>
    modifier
      ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &`
      : `:merge(.group)[aria-${normalize(value)}] &`,
  { values: theme('aria') ?? {} }
)

So to adapt to your plugin:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

tailwind.config = {
  plugins: [
    tailwind.plugin(({ matchVariant }) => {
      matchVariant(
        'group-status',
        (value, { modifier }) =>
          modifier
            ? `:merge(.group\\/${modifier})[data-status=${value}] &`
            : `:merge(.group)[data-status=${value}] &`,
        {
          values: {
            inactive: 'inactive',
            active: 'active',
          }
        }
      );
    }),
  ],
}

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div data-status="inactive" class="group/foo">
  <div data-status="active" class="group/bar">
    <div class="w-10 h-10 group-status-inactive/foo:bg-red-500"></div>
    <div class="w-10 h-10 group-status-active/bar:bg-green-500"></div>
  </div>
</div>

<!-- end snippet -->