S3 Policy

{
    "Version": "2012-10-17",
    "Id": "Policy1721361019639",
    "Statement": [
        {
            "Sid": "Stmt1721361016069",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::dhruv-react-app-2/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E2JOM2URUBUIP0"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::dhruv-react-app-2/*"
        }
    ]
}

AWS cloudfront general page

https://i.sstatic.net/trvVE2zy.png

error

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>AM9NBX5C17WYBJ8G</RequestId>
<HostId>aQZcvuNwk/9BTlkR1B8s1Nx4uyo0gie0a7hu/He3Zwnk64SfhGVhbedSQBkPeyO/JXxuIjzBqps=</HostId>
</Error>

Website is simply a react frontend react application.

I haven’t changed the policy myself, it is done by cloudfront only, also i am able to access the static website directly through S3 but through cloudfront it is giving the above mentioned error

I am very new to using AWS so requesting community if i should be sharing more information let me know. Any help is appreciated.