Handling seperate session-token for routes in app

[p-monty]

I have my structure like this /pages/[tenant]/Login then my /pages/api/auth/[...nextauth].ts and a middleware.ts in /src

I have it working if i just login but what I want now is to login for the [tenant]. So I have the following options set in [...nextauth].ts

cookies: {
      sessionToken: {
        name: process.env.NODE_ENV === 'production' ? '__Secure-next-auth.session-token' : 'next-auth.session-token',
        options: ({ req, res }: { req: NextApiRequest, res: NextApiResponse }) => {
          console.log("Cookies options function called");
          const tenant = req.headers['x-tenant'] || ''
          return {
            httpOnly: true,
            secure: process.env.NODE_ENV === 'production', // Only use secure cookies in production
            path: `/${tenant}`, // Dynamic path based on tenant code
            sameSite: 'lax',
          }
        },
      },
    },

and then my middleware I have been trying a few things like getting the first param from example url localhost:3000/ABC/Login to set ABC in the request headers. Not much luck with all my varying attempts and configurations (feels like I have tried 100's of different configurations and middleware variations). So hoping to clear up some questions:

1. Am I on the right track?
2. If so do I maybe need the api folder under [tenant] path in my folders? (according to docs not recommended though i thought)
3. When I hardcode it to ABC for example instead of doing it dynamically the cookie is in the correct path but useSession in my app doesn't seem to look at it or update accordingly, so is there a config for it to look at a Path or does it do it automatically in the background?

EDIT:
So followed the advanced initialisation documentation and the setting of the path dynamically is working great (what i posted above was way off!). But my useSession code didn't update automatically client side so need to some how make it recognise the cookie is not against a path.