How can I make the FluentUI style of my Blazor app also apply to a dynamic react-jsonschema-form loaded using JS-interop?

In my Blazor view, I am dynamically loading a React component that is merely a wrapper around react-jsonschema-form:

<div ref={formParentDivRef} onBlur={handleBlur}><Form      ref={formRef}      config={formConfigOptions}      schema={schema}      theme={theme}      uischema={uischema}      formData={formData}      validator={validator}      onChange={onChange}      onSubmit={onSubmit}    /></div>

Form is defined by:import { Form } from '@rjsf/fluent-ui';

Version: "@rjsf/fluent-ui": "^5.24.9"

The generated form has for instance text inputs with the element attribute class="ms-TextField-field", which suggests that the generated form is styled using 'FluentUI'.

Despite this, it seems like the style from the rest of the app does not apply to the embedded form... For instance, when switching between light and dark modes.

The mode switch is implemented in the MainLayout.razor using:

<FluentDesignTheme StorageName="theme" OfficeColor="@OfficeColor" @bind-Mode="@Mode" OnLoaded="OnloadedTheme" />DesignThemeModes Mode;

I am fairly new to front-end tech and not sure how much magic I can expect from @rjsf/fluent-ui versus what I need to manually map between the Blazor env and the the React loaded component...

Thanks for any help.