Components changes on wrong component

[johanronn77]

Code:

<AddToCartButton/>
<ErrorMessage>This is an error</ErrorMessage>
const ErrorMessage= styled.div({
 .....
 });

Problem:

Within AddToCartButton we have another styled component: const Base = styled.div({ display: 'inline-block', fontSize: 0, marginLeft: small });

The problem is that when the page is running the styles for Base is set on component ErrorMessage in its parent when page is rerendered.

AddToCartButton is with the class cz nb dd. The one after is the ErrorMessage that is given the Base styling.

Before rerendering:

After rerendering:

ErrorMessage css:

Base component within AddToCartButton:

Note! Within the AddToCartButton there is a Suspense that are adding an lazy loaded component (Tooltip). When removing the Suspense the problem is not happening.

Moving the ErrorMessage before the AddToCartButton is working as well.

Thanks for any answer.