why first selector was modified?

[HytonightYX]

Work with styled-component v5, and I found that first selector will be modified, and this made the whole page's style broken.

Here is my test code

export function addCssScope(scopes: string[]) {
  // FORM:
  // https://github.com/Andarist/stylis-plugin-extra-scope/blob/master/src/index.js
  const extraScopePlugin: StylisPlugin = (context, content, selectors) => {
    if (context === -2) {
      console.log('[selectors]', selectors);
      console.log('[content]  ', content);
      console.log('\n\n');
      return;
    }

    if (context !== -1) {
      return;
    }

    console.log('[before] selectors', selectors);

    const selector = selectors[0];
    selectors[0] = `.${scopes[0]} ${selector}`;

    for (let i = 1; i < scopes.length; i++) {
      selectors.push(`.${scopes[i]} ${selector}`);
    }

    console.log('[after] selectors', selectors);
  };

  Object.defineProperty(extraScopePlugin, 'name', {
    value: 'addCssScopePlugin',
  });

  return extraScopePlugin;
}

<StyleSheetManager target={container} stylisPlugins={plugins}>
  // .......
</StyleSheetManager>

[ToanKim]

I'm experiencing the same issue, have you found any ideas why?