bug(react): empty className not applied (includeImportCustomElements: true)

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.18.0

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.5.3

Current Behavior

includeImportCustomElements: true removes the hydration class from the web component. This cause an issue regarding applying and removing classes from elements.

Demo:

function App() {
  const [value, setValue] = React.useState(false);

  return (
    <div>
      <MyComponent className={value ? 'is-red' : ''}>
        Should apply 'is-red' = {value ? 'true' : 'false'}
      </MyComponent>

      <OtherMyComponent className={value ? 'is-red' : ''}>
        Should apply 'is-red' = {value ? 'true' : 'false'}
      </OtherMyComponent>

      <button onClick={() => setValue(!value)}>Test 123</button>
    </div>
  );
}

If you start toggle the value state you will see that after a cycle the is-red class should be removed again from the element but this does not happen due this check:

https://github.com/ionic-team/stencil-ds-output-targets/blob/0eb22ba25fa808a4c71f25001e2640ac7a941405/packages/react-output-target/react-component-lib/utils/attachProps.ts#L8-L10

This issue is only happing with the following stencil.config:

    reactOutputTarget({
      componentCorePackage: 'other-lib-code',
      proxiesFile: '../other-lib-code-react/lib/components/stencil-generated/index.ts',
      includeImportCustomElements: true,
      includePolyfills: false,
      includeDefineCustomElements: false,
    }),
    {
      type: 'dist-custom-elements',
      dir: 'components',
      copy: [
        {
          src: '../scripts/custom-elements',
          dest: 'components',
          warn: true,
        },
      ],
      includeGlobalScripts: false,
    },

(used in ionic)

Expected Behavior

ClassName check should not ignore a new empty className

Steps to Reproduce

Checkout https://github.com/danielleroux/className-Issue
pnpm install
pnpm dev --filter my-app
Toggle Button some times

Code Reproduction URL

https://github.com/danielleroux/className-Issue

Additional Information

No response

ionic-team / stencil-ds-output-targets

bug(react): empty className not applied (includeImportCustomElements: true) #440