[BUG]: backgrounds/liquid-ether

[JavedHussain-06]

Describe the issue

Hi, I noticed a small issue when passing a component or element as children to the LiquidEther component. Even after fixing the TypeScript type error for children, the rendered content was not staying visible on top of the background. Currently, it appears for a brief moment when the page first loads, but then disappears.

Reproduction Link

No response

Steps to reproduce

Steps to Reproduce:

Pass a React component or element as children to LiquidEther.

Render the page.

Expected Behavior:
The children should remain visible on top of the liquid/particle background throughout the lifecycle of the page.

Actual Behavior:
The children is briefly visible on first render, but then vanishes. Inspecting the DOM shows that the elements exist but are not being displayed.

Additional Notes:

TypeScript type for children was fixed (ReactNode) but the issue persists.

It seems related to the layering or z-index handling inside the LiquidEther container.

No console errors appear during rendering.

Environment:

React 19

TypeScript

Tailwind CSS

Latest version of LiquidEther

And here's how you can fixed code
this will fix the type error
export interface LiquidEtherProps { children?: ReactNode | ReactNode[]; // add this }
**And this will fix the visibility issue**
return (

{children}

);

Validations

• I have checked other issues to see if my issue was already reported or addressed

[DavidHDev]

You should not pass children components to any of the backgrounds in React Bits. It's not how they're designed to work.