How to use the @aws-cdk/aws-iam.CanonicalUserPrincipal function in @aws-cdk/aws-iam

this.resource = new CfnCloudFrontOriginAccessIdentity(this, "Resource", {
      cloudFrontOriginAccessIdentityConfig: {
        comment: (props && props.comment) || "Allows CloudFront to reach the bucket"
      }
    });
    // physical id - OAI name
    this.originAccessIdentityName = this.getResourceNameAttribute(this.resource.ref);

    // Canonical user to whitelist in S3 Bucket Policy
    this.cloudFrontOriginAccessIdentityS3CanonicalUserId = this.resource.attrS3CanonicalUserId;
    // The principal for must be either the canonical user or a special ARN
    // with the CloudFront Origin Access Id (see `arn()` method). For
    // import/export the OAI is anyway required so the principal is constructed
    // with it. But for the normal case the S3 Canonical User as a nicer
    // interface and does not require constructing the ARN.
    this.grantPrincipal = new iam.CanonicalUserPrincipal(this.cloudFrontOriginAccessIdentityS3CanonicalUserId);
  }
}

websiteIndexDocument: websiteIndexDocument || 'index.html',
            websiteErrorDocument: websiteErrorDocument || 'error.html',
        });

        const originId = new CfnCloudFrontOriginAccessIdentity(
            this,
            'OriginAccessIdentity',
            {
                cloudFrontOriginAccessIdentityConfig: {
                    comment: `CloudFront OriginAccessIdentity for ${bucket.bucketName}`,
                },
            },
        );

        bucket.grantRead(
            new CanonicalUserPrincipal(originId.attrS3CanonicalUserId),
        );

        if (!disableUpload) {
            const placeHolderSource = path.join(__dirname, '..', 'website');

            new BucketDeployment(this, 'WebsiteDeployment', {
                sources: [Source.asset(source || placeHolderSource)],
                destinationBucket: bucket,
                retainOnDelete: removalPolicy === RemovalPolicy.RETAIN,
            });
        }

        this.s3OriginConfig = {
            originAccessIdentityId: originId.ref,
            s3BucketSource: bucket,
        };

websiteIndexDocument: 'index.html',
            websiteErrorDocument: 'error.html',
        });

        const originId = new CfnCloudFrontOriginAccessIdentity(
            this,
            'OriginAccessIdentity',
            {
                cloudFrontOriginAccessIdentityConfig: {
                    comment: `CloudFront OriginAccessIdentity for ${websiteBucket.bucketName}`,
                },
            },
        );

        websiteBucket.grantRead(
            new CanonicalUserPrincipal(originId.attrS3CanonicalUserId),
        );

        let s3OriginConfig = {
            originAccessIdentityId: originId.ref,
            s3BucketSource: websiteBucket,
        };

        const distributionConfig = {
            originConfigs: [
                {
                    s3OriginSource: {
                        ...s3OriginConfig,
                    },
                    behaviors: [{ isDefaultBehavior: true }],
                },
            ],