i18next not working with webComponent and shadowRoot - React.JS - reactjs

Question

I have a problem with validations in dynamically added webComponent in shadowRoot. This validations with translate is working properly in normal Virtual DOM but when i want to dynamically add validations result to Shadow DOM, i18next return not translated value.
In Normal DOM this line
this.message = t(FormApplicationResources.ValidationErrorRequired); return valid string text from database in proper language, but in Shadow DOM same code fragment return key value from DB (not translated)
...
import { t } from "i18next";
class PasswordValidator implements IValidator {
private readonly message: string;
private readonly validPasswordCharactersRegex: RegExp = /[a-zA-Z0-9!##$&()'%*{}\[\]~:;?\-|<>=\\-`.+,/\"]/g;
public type: ValidatorType = ValidatorType.Required;
public constructor(message?: string) {
if (message) {
this.message = message;
} else {
this.message = t(FormApplicationResources.ValidationErrorRequired);
}
}
public validate(value: any, callbacks: ICallbacks): IValidResult {
...
}
}
export default PasswordValidator;
I am using attachchShadow with open mode but does not make any difference.
...
connectedCallback(): void {
this.loadAllAttributes();
const props: any = this.props();
...
this.createPoint();
...
this.render();
}
render(): void {
const props: any = this.props();
if (props.apiEndpoint && props.baseName && props.baseUrl && props.instanceName) {
ReactDOM.render(
<App
lang={props.lang ? props.lang : DEFAULT_SYSTEM_CULTURE}
{...props}
/>
, this.mountPoint
);
}
}
createPoint(): void {
if (!this.mountPoint) {
const shadow: ShadowRoot = this.attachShadow({ mode: "open" });
this.mountPoint = document.createElement("div");
this.mountPoint.id = "Example";
this.mountPoint.style.boxSizing = "example";
shadow.appendChild(this.mountPoint);
...
}
}