how to get data from normal Javascript file and use data in text/babel file

const { Table, Checkbox } = rsuite;
const { Column, HeaderCell, Cell } = Table;
function MultiSelectTable() {
    const [checkedKeys, setCheckedKeys] = React.useState([]);
    const [data, setData] = React.useState([]);
    React.useEffect(() => {
        fetch(fetchUrl)
          .then(res => res.json())
          .then(json => setData(json["oslc:results"]))
      }, []); 

    let checked = false;
    let indeterminate = false;

    if (checkedKeys.length === data.length) {
        checked = true;
    } else if (checkedKeys.length === 0) {
        checked = false;
    } else if (checkedKeys.length > 0 && checkedKeys.length < data.length) {
        indeterminate = true;
    }

    const handleCheckAll = (value, checked) => {
        const keys = checked ? data.map(item => item["oslc:label"]) : [];
        setCheckedKeys(keys);
        console.log(keys);
    };
    const handleCheck = (value, checked) => {
        const keys = checked ? [...checkedKeys, value] : checkedKeys.filter(item => item !== value);
        setCheckedKeys(keys);
        console.log(keys);
    };
    const CheckCell = ({ rowData, onChange, checkedKeys, dataKey, ...props }) => (
        <Cell {...props} style={{ padding: 0 }}>
            <div style={{ lineHeight: '46px' }}>
                <Checkbox
                    value={rowData[dataKey]}
                    inline
                    onChange={onChange}
                    checked={checkedKeys.some(item => item === rowData[dataKey])}
                />
            </div>
        </Cell>
    );

    return (
        <div style={{ padding: 20 }}>
            <Table virtualized height={400} data={data}>
                <Column width={100} align="center" fixed>
                    <HeaderCell style={{ padding: 0 }}>
                        <div style={{ lineHeight: '40px' }}>
                            <Checkbox
                                inline
                                checked={checked}
                                indeterminate={indeterminate}
                                onChange={handleCheckAll}
                            />
                        </div>
                    </HeaderCell>
                    <CheckCell
                        dataKey="oslc:label"
                        checkedKeys={checkedKeys}
                        onChange={handleCheck}
                    />
                </Column>

                <Column width={150} align="center" fixed>
                    <HeaderCell>ID</HeaderCell>
                    <Cell dataKey="oslc:label" />
                </Column>

                <Column width={200}>
                    <HeaderCell>Title</HeaderCell>
                    <Cell dataKey="koatl:apiTitle" />
                </Column>
                <Column width={300}>
                    <HeaderCell>Description</HeaderCell>
                    <Cell dataKey="koatl:apiDescription" />
                </Column>
            </Table>
        </div>
    );
}
ReactDOM.render(<MultiSelectTable />, document.getElementById('example'));

This is my app.js file I want data from custom.js file.

let fetchUrl;
async function getData(url) {
    console.log(url)
    const response = await fetch(url, {});
    if (!response.ok) {
        throw Error(response.statusText);
    }
    const data = await response.json();
    return data;
}
async function initialize(url) {
    fetchUrl=url;
    var requestInProgress=false;
    if(!requestInProgress){
        requestInProgress = true;
        let response = await getData(url);
    }
}

<input type="text" id="filter-text-box" style="width:300px;height:40px" placeholder="Filter..." oninput="onFilterTextBoxChanged()">

             <div id="example" style="height:350px">
             </div>
          </div>
             <script type="text/babel" src="{{ url_for('dialog.static', filename='static/app.js') }}"></script>
            <script type="text/javascript" src="{{ url_for('dialog.static', filename='static/main.js') }}"></script>

function createURL() {
            var gc_context = "{{ gc_context }}";
            var type = document.getElementById('queryServices');
            typeId = type.value;
            //console.log("Configuration:"+ configurationId.length);
            if ((componentId != '*') && typeId != "*") {
                /**if (gc_context.length>0 && gc_context!='None') {
                    selectorUrl = "" + "/oslc/component/" + componentId + "/config/" + gc_context + "/selection/" + typeId + "/selector";
                    console.log("URL created with context "+gc_context + ": n"+ selectorUrl);
                    initialize(selectorUrl);
                } else {
                    selectorUrl = "" + "/oslc/provider/" + componentId + "/resources/" + typeId + "/selector";
                    console.log("URL created without context: " + "n"+ selectorUrl);
                    initialize(selectorUrl);
                }*/
                selectorUrl = "" + "/oslc/provider/" + componentId + "/resources/" + typeId + "/selector";
                console.log("URL created without context: " + "n" + selectorUrl);
                initialize(selectorUrl);
            }

        }

here you can see that from the HTML file I am sending the URL to the custom.js file then I want the custom.js file should go app.js text/babel file. But the value only goes to the custom.js file but not going to app.js. I tried direct to HTML to app.js still not going. How can I send to data to app.js because app.js is not a normal js file another problem is app.js file is only the first time running but here When we have selectorUrl we want the app.js file should run otherwise not. How can I do that? Please help me with that. And I am using jinja template.