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]

<React.StrictMode> causes this: when I remove it, all works properly