How to use custom error page with cloudfront edge function

I have built a simple CloudFront + S3 web hosting site with the following edge function on the Viewer request. The code is as follows.

The purpose of the edge function is twofold: 1. When a specific path is requested and the current timestamp exceeds the specified datetime, display "close.html". 2. When a directory is requested, complement it with "/index.html" and display the resulting page.

I also want to display "/404.html" when a requested resource does not exist on the origin.

However, when I configured a custom error page on the distribution, the edge function wouldn't run. "/404.html" was shown without specifying an existing resource. I suspect this is because the custom error page logic is invoked before the edge function.

Is there a way to achieve both a custom error page and the edge function?

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    var closeTime = new Date('2023-05-31T14:59:59.000Z').getTime();
    var now = new Date().getTime();
    var isClosed = false;
    var requestPath = '';
    var newurl = '';
    var host = 'XXXXX.com';
    
    if (uri.endsWith('somePath/') || uri.endsWith('somePath')) {
        if (now > closeTime) {
            newurl = `https://${host}/somePath/close.html`
        } else{
            newurl = `https://${host}/somePath/index.html`
        }
    }
    
    if (!newurl) {
        if (uri.endsWith('/')) {
            request.uri += 'index.html';
            newurl = request.uri;
        } else if (!uri.includes('.')) {
            request.uri += '/index.html';
            newurl = request.uri;
        }
    }
    if (newurl) {
            var response = {
            statusCode: 301,
            statusDescription: 'Moved Permanently',
            headers:
                { "location": { "value": newurl } }
            }
            return response;
    }

    return request;
}