CloudFront with S3 multi-site bucket - refresh page send back to root index

Hello,

I have a setup which does the following

1. is upload a development branch to s3 bucket,
2. upload a new root index.html with links links sub-domain to appropriate s3 folder

All this works ok, until i hit refresh (or even just copy and url and paste it into a new window). So i need to hir refresh and remain on the same page

======

Setup details:

• S3 bucket with:
  • multiple sites hosted on it, each in it's own subdirectory
  • each sub-dir has an index.html
  • root s3 bucket has a index.html with links to each of those sub-dirc/index.html
• CloudFront distribution pointing to S3 with:
  • origin access configured (and copied to s3)
  • alternate domains (wildcard subdomain & domain; all registered on Route 53 with SSL cert)
  • behaviour set with caching disabled, CORS-S3Origin, and the below CloudFunction for viewer request:
  • and a 404 error policy to revert to /index.html

function handler(event) {
    const domain = ".my-domain.com";

    var request = event.request;
    const subdomain = request.headers.host.value.split(domain);
    if (request.uri.length == 0 || request.uri.endsWith('/')) {
        if (request.uri.endsWith('/')) {
            request.uri += 'index.html';
        } else {
            request.uri += '/index.html';
        }
    }
    if (subdomain.length == 2) {
        request.uri = '/' + subdomain[0] + request.uri;  
    }
    return request;
}

Thanks