AWS Cloudfront Behaviors Function not redirecting

Question

Trying to figure out a way to redirect traffic from my AWS CloudFront page to another URL.

I'm currently setting up a "Function" using Cloudfront Functions.
Function code (function name = exampleFunction):

function handler(event) {
    var redirectUrl = "https://example.com"
    var response = {
        statusCode: 302,
        statusDescription: 'Found',
        headers: {
            'Location': { value: redirectUrl }
        }
    };
    return response;
}

I publish that and then on my Cloudfront Distribution Behaviors, I create a behavior:

 - Path Pattern: /to/my/page.html 
 - Origin and origin groups: example-origin-on-aws  
 - Compress objects automatically: No  
 - Viewer protocol Policy: Http and Https  
 - Allowed HTTP methods: GET, HEAD  
 - Restrict viewer access: No  
 - Cache key and origin requests: Cache policy and origin request policy   
 - Function asssociations: 
   - Viewer request:  
      - Function type: CloudFront Functions
      - Function ARN / Name: exampleFunction

I then save the changes.

I also have the following Origin settings:

 - Origin domain: BucketName
 - Name: BucketName
 - S3 bucket access:  
    - Yes use OAI:
       - Origin access identity: My OAI
       - Bucket policy: Yes
 - Enable Origin Sheild: No

Then when I try to navigate to "https://s3.amazonaws.com/BucketName/to/my/page.html", it still takes me to that page instead of redirecting me to "https://example.com".

Any suggestions to point me in the right direction, or as to what I'm doing wrong would be greatly appreciated.