Animations flickering in React 18

[rvision]

When I changed code from ReactDOM.render to root.render, all animations appear buggy. Like element exists on the page and then dissapears.

Anyone faced this issue?

[rvision]

sass file:

@import '@animxyz/core';

@include xyz-all;

:root {
    --xyz-duration-default: 0.2s
}

animation wrapper components:

import { XyzTransition } from '@animxyz/react';

const Animate = () => {
    return <>Invalid animation</>;
};

Animate.FadeIn = ({ children }) => {
    return (
        <XyzTransition appear xyz="fade">
            {children}
        </XyzTransition>
    );
};

Animate.ZoomIn = ({ children }) => {
    return (
        <XyzTransition appear xyz="fade small-100%">
            {children}
        </XyzTransition>
    );
};

Animate.EnterLeft = ({ children }) => {
    return (
        <XyzTransition appear xyz="fade left duration-5s">
            {children}
        </XyzTransition>
    );
};

Animate.EnterRight = ({ children }) => {
    return (
        <XyzTransition appear xyz="fade right duration-5s">
            {children}
        </XyzTransition>
    );
};

export default Animate;

I am puzzled since all of this works properly when initializing the app with ReactDOM.render, but I get a warning for React 18 that rendering should be done with root.render

[rvision]

causes this: when I remove it, all works properly