AWS S3 bucket policy with HTTP Referer gives 403 always

I'm trying to add bucket-policy into my S3 bucket. I have a requirement that only my website should be able to access the resources from the bucket. I found that HTTP Referer is useful in the current scenario, hence I have gone through the following steps:

1. Created the bucket
2. Uploaded a png file into it
3. Disabled Block all public access
4. Added below bucket policy

{
  "Id": "Policy1599658083694",
  "Version": "2012-10-17",
  "Statement": [
      {
          "Sid": "Stmt1599658081534",
          "Action": [
              "s3:GetObject"
          ],
          "Effect": "Allow",
          "Resource": "arn:aws:s3:::mywebsiteso/*",
          "Condition": {
              "StringLike": {
                  "aws:Referer": "https://blue.mywebsite.io/*"
              }
          },
          "Principal": "*"
      }
  ]
}

I'm now assuming that it should be accessible from my website, and not directly using an URL. Here are the result of both

Using Direct URL

5. I have created an HTML page (test.html) with the below content and added to the website root directory.

<a href="https://mywebsiteso.s3.ap-south-1.amazonaws.com/403.PNG">click here</a>

However, when I click on the link, it showing the same response of 403.

I have tried several ways like:

 "aws:Referer": [
                 "http://blue.mywebsite.io",
                 "http://blue.mywebsite.io/*",
                 "http://www.blue.mywebsite.io/*",
                 "https://blue.mywebsite.io",
                 "https://blue.mywebsite.io/*",
                 "https://www.blue.mywebsite.io/*"
                ]