无法在我的树枝模板中渲染反应组件

Question

我正在构建一个 symfony 应用程序。但是我无法在我的树枝模板中渲染任何反应组件。 Webpack encore 已安装并正在运行。我已经尝试完成他们文档中的所有步骤 - https://symfony.com/bundles/ux-react/current/index.html.

我在下面添加了屏幕截图和代码。

我在屏幕上的输出是 -

“data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="DepositInputs"

树枝代码-

<div class="example-wrapper">

    {{ react_component('DepositInputs') }}
    
</div>

app.js代码-

import '../styles/app.scss';

import { registerReactControllerComponents } from '@symfony/ux-react';

registerReactControllerComponents(require.context('./react', true, /\.(j|t)sx?$/));

DepositInput.js 代码 -

import React from 'react';

const DepositInputs = () =>  {
    return (
        <div>
            <div className="row">
                <p>TEST</p>
            </div>
        </div>
    );
}

export default DepositInputs;

文件结构截图-

composer.json 文件 -

我可以使用 react render 方法，但希望这种本地方法能够工作，因为它在我的 twig 文件中更容易使用，也更容易将 twig 变量作为道具传递给组件！

提前非常感谢您提供的任何帮助！我一直在拔头发！