Returning React Components Inside a Service: Anti-Pattern?

export class TextFieldService extends Effect.Service<TextFieldService>()(
    'TextFieldService',
    {
        effect: Effect.gen(function* () {
            const mock = () => faker.lorem.word()

            const makeReactComponent = () => {
                return <div>Hello</div>
            }
            return {
                // Business Logic
                mock,
                defaultValue: () => '',
                // UI Components Specific to this field type
                makeReactComponent,
            } as const
        }),
    }
) {}
const layers = Layer.mergeAll(TextFieldService.Default)
const runtimeRx = Rx.runtime(layers)

export const fieldRx = runtimeRx.rx(
  Effect.gen(function* () {
    const fieldService = yield* TextFieldService
    return fieldService.makeReactComponent()
  }),    
)

function ReactComponent() {
    const fieldValue = useRxValue(fieldRx)
    return <div>{fieldValue}</div>
}

export class TextFieldService extends Effect.Service<TextFieldService>()(
    'TextFieldService',
    {
        effect: Effect.gen(function* () {
            const mock = () => faker.lorem.word()

            const makeReactComponent = () => {
                return <div>Hello</div>
            }
            return {
                // Business Logic
                mock,
                defaultValue: () => '',
                // UI Components Specific to this field type
                makeReactComponent,
            } as const
        }),
    }
) {}
const layers = Layer.mergeAll(TextFieldService.Default)
const runtimeRx = Rx.runtime(layers)

export const fieldRx = runtimeRx.rx(
  Effect.gen(function* () {
    const fieldService = yield* TextFieldService
    return fieldService.makeReactComponent()
  }),    
)

function ReactComponent() {
    const fieldValue = useRxValue(fieldRx)
    return <div>{fieldValue}</div>
}