Firebase - function rewrites for client/server setup in 1 project - firebase

Question

Fairly new to Firebase (and love it), but have scoured the web and cannot find a similar issue with a valid solution.
I am using 2 firebase.json files, 1 for my client and 1 for my server (both express apps). They both deploy a function each to a single firebase project.
Note: They are both express apps (client side is ssr react app, server side is node js api).
The problem I am having is that for the life of me, I cannot seem to redirect the /api path to my server firebase function.
This is my client-side firebase.json:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "/api{,/**}",
"function": "server"
},
{
"source": "**",
"function": "client"
}
],
"ignore": ["firebase.json", "**/.*", "node_modules/**"]
},
"functions": {
"source": ".",
"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint", "npm --prefix \"$RESOURCE_DIR\" run build"]
}
}
And this is my server (api) firebase.json:
{
"hosting": {
"public": "lib",
"rewrites": [
{
"source": "**",
"function": "server"
}
],
"ignore": ["firebase.json", "**/.*", "node_modules/**"]
},
"functions": {
"source": ".",
"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint", "npm --prefix \"$RESOURCE_DIR\" run build"]
}
}
Whatever I do, when I navigate to www.mydomain.com/api it is only rendering the client side app not the API! Yet I have both the client & server functions showing in my Firebase functions dashboard.
So a couple of questions:
1) Why is this happening, is there something wrong with my firebase config?
2) Is it ok to use 2 firebase.json files for 1 project or preference to separate these into multiple projects? If so, why?
Thanks