Not able to use any React hook

[mxvsh]

I am using Vite Server with Express (middleware). I have an API which results location of multiple index.jsx files which contains React compiled code (ES), sample:

import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { api, toast, ApiError } from "@botmate/client";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, Input, CardFooter, Button } from "@botmate/ui";
function LoginPage() {
  const emailRef = React.useRef(null);
  const passwordRef = React.useRef(null);
  function handleLogin() {
    var _a, _b;
    const email = (_a = emailRef.current) == null ? void 0 : _a.value;
    const password = (_b = passwordRef.current) == null ? void 0 : _b.value;
    if (!email || !password) {
      alert("Please fill in all fields");
      return;
    }
    api.post("/auth/login", {
      email,
      password
    }).then(() => {
      toast.success("Logged in successfully");
    }).catch((err) => {
      var _a2;
      if (err instanceof ApiError) {
        toast.error((_a2 = err.response) == null ? void 0 : _a2.data.error);
      }
    });
  }
  return /* @__PURE__ */ jsx("div", { className: "h-screen flex justify-center items-center px-4", children: /* @__PURE__ */ jsxs(Card, { className: "w-[24rem]", children: [
    /* @__PURE__ */ jsxs(CardHeader, { children: [
      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: "Login" }),
      /* @__PURE__ */ jsx(CardDescription, { children: "Welcome back! Please login to continue." })
    ] }),
    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
      /* @__PURE__ */ jsx(Input, { placeholder: "Email", type: "email", ref: emailRef }),
      /* @__PURE__ */ jsx(
        Input,
        {
          placeholder: "Password",
          type: "password",
          autoComplete: "off",
          ref: passwordRef
        }
      )
    ] }),
    /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(
      Button,
      {
        className: "w-full",
        type: "submit",
        onClick: () => handleLogin(),
        children: "Login"
      }
    ) })
  ] }) });
}
export {
  LoginPage as default
};

The above file is loaded successfully, but I am getting the following error whenever I load the page:

TypeError: Cannot read properties of null (reading 'useRef')

When I remove the useRef (and it's references), the UI loads up without error, as soon as I add any React hook, I get the same error.

Repo Link: https://github.com/botmate/botmate/tree/dev

I have spent more than 4 hours on this trying to fix. Please help. Thanks!

Note: It works fine when I run the application in development mode.

Steps for reproduct

1. Clone the repo
2. Checkout to dev branch [commit b19e5a7]
3. Run pnpm i
4. Run nx local-registry
5. In new terminal, run nx release publish
6. Create new project with the following package.json

{
	"scripts": {
		"start": "botmate start"
	},
	"dependencies": {
		"@botmate/cli": "0.0.1",
		"@botmate/client": "0.0.1",
		"@botmate/plugin-auth": "0.0.1",
		"@botmate/plugin-users": "0.0.1"
	}
}

7. Run npm i
8. Create index.mjs
9. Write the following content

import { Application } from '@botmate/server';

const app = new Application();
app.initialize().then(() => {
	app.start();
});

10. Run npx botmate install
11. Run node index.mjs

Then open localhost:3000/users in your browser, it should show a button,
now, open localhost:3000/login - you should see the error