Can't render react components in my twig templates

i am building a symfony app. However i cannot get any react components to render in my twig template. Webpack encore is installed and running. I have tried going through all steps in their documentation - https://symfony.com/bundles/ux-react/current/index.html.

I have added screenshots and code below.

output i am getting on screen is -

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

twig code -

<div class="example-wrapper">

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

app.js code -

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

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

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

DepositInput.js code -

import React from 'react';

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

export default DepositInputs;

file structure screenshot -

project file structure

composer.json file -

composer.json file

I could use the react render method but would like this native method to work as it's much easier to use in my twig files and also easier to pass twig variables down to components as props!

thank you very much in advance for any help offered! I have been pulling my hair out!

Look closely : https://symfony.com/bundles/ux-react/current/index.html#usage
Your react_component([...]) should be in the opening div tag, like this :

<div {{ react_component('Admin/OtherComponent') }} >{# Nothing needed in the div! #}</div>

and not in between the opening and closing tags.
Assuming you put your JS files in the right folders, everything should work properly. This should solve your problem.
It's also good practice to put something in the div, like some text indicating your component is loading.