[SF][FlexBox]: Component style removed after another ui5-wc-react context is closed

Describe the bug

Hi Team,
We are upgrading ui5-wc-react version to 1.28.1. When the page have multiple app, each app has it own ui5-wc-react instance. If we close one app, the component in it will be unmounted, and the corresponding stylesheet will be removed. This will affects other apps on the page if they are using same component in the unmounted app.

This issue happened after this pr is released: #5611

And the root cause is a new hook is adopted to manage ui5-wc-react component styles, this hoot will remove the stylesheet in the document object, which will affect all others app using ui5-webomponent-react component styles.

at

ui5-webcomponents-react/packages/main/src/components/FlexBox/index.tsx

Line 71 in 1d3decd

useStylesheet(styleData, FlexBox.displayName);

at

ui5-webcomponents-react/packages/base/src/hooks/useStylesheet.ts

Line 41 in 1d3decd

removeStyle('data-ui5wcr-component', componentName);

Isolated Example

No response

Reproduction steps

Open a page that has two different app with different ui5-wc-react context, both have FlexBox component render inside.
Unmount one of the app
See the style of the FlexBox component in another app is also removed

Expected Behaviour

Stylesheet removal should not be affecting component in different ui5-wc-react context

Screenshots or Videos

No response

UI5 Web Components for React Version

1.28.1

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

I’m not disclosing any internal or sensitive information.

This issue is impacting all ui5-wc-react component in multiple instance page, please kindly prioritize the processing, thanks.

Maybe by adding runtime count for the createOrUpdateStyle function in

ui5-webcomponents-react/packages/base/src/hooks/useStylesheet.ts

Line 32 in 1d3decd

createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName);

would help resolving this issue?

refer to ui5/webcomponents: https://github.com/SAP/ui5-webcomponents/blob/041f57323fcaeaa6fc5aec7299e673ead6aece0e/packages/base/src/theming/applyTheme.ts#L43

🎉 This issue has been resolved in version v1.28.2 🎉

The release is available on v1.28.2

Your semantic-release bot 📦🚀