I have a front-end set up within a larger Bazel mono repo similar to this

Root
  |---UI
  |     |-React-App
  |     |-Component-Library
  |-package.json

The react app is set up using create-react-app. Npm is being managed by Bazel as defined in the repo WORKSPACE file I would like to create a js_library from the component-library folder and consume it in my react app. I created a sample library as such which builds successfuly.

ts_project(
    name = "compile_ts",
    srcs = glob(["src/*.ts"]),
)
js_library(
    name = "UIcomponent",
    package_name = "@npm-package-name/UIcomponent", 
    srcs = glob(["src/*.ts"]),
    visibility = ["//visibility:public"],
    deps = [":compile_ts"],
)

My question is how can I consume it inside my React-App. Currently, I am passing the library as such

_RUNTIME_DEPS = [
    "chdir.js",
    "copy_static_files",
    "@npm//react",
    "@npm//react-dom",
    "//UI/Component-Library:UIcomponent",
]
react_scripts(
    name = "buildBoilerplate",
    args = [
        "--node_options=--require=./$(execpath chdir.js)",
        "build",
    ],
    data = _RUNTIME_DEPS + [
        "@npm//@types",
    ],
    env = {
        "BUILD_PATH": "./buildBoilerplate",
    },
    output_dir = True,
)

I am consuming it in my app as such

import testFunc from "@npm-package-name/UIcomponent";

My app can't resolve this. I am assuming that I am making a mistake in the way I am consuming the library. Perhaps I need to pass it as a dependency instead of data. I'm really stuck here. Any help is appriciated.