Cloudfront and Classic Load Balancer SSL certificate mismatch

I have a Vuejs app stored in a S3 bucket, with a Cloudfront distribution pointing to that static-website enabled origin. I have domain names "mydomain.com" and "*.mydomain.com" (registered with Route53) as the Cloudfront Distribution's Alternate domain names. I can access https://mydomain.com on the internet; I have Route53 records pointing to the Cloudfront distribution's domain, and the Custom SSL certificate set as one created through AWS Certificate Manager (ACM).

Now, my backend server is hosted on a ec2 instance, and does not handle https. I have set up a classic load balancer in front of the ec2 instance to take the HTTPS requests and forward it as HTTP to my ec2 instance. The health checks pass at Ping Target "HTTP:8080/", and so the listener is set to take HTTPS from Load Balancer Port 443, and to forward it as HTTP on Instance Port 8080.

The Cloudfront Distribution and the Load Balancer share the same SSL certificate, and the certificate has domains "mydomain.com" and "*.mydomain.com". When the frontend client (from https://mydomain.com) makes a network request to the DNS of the load balancer, why does the browser give net::ERR_CERT_COMMON_NAME_INVALID error? The Cloudfront distribution and the load balancer share the same SSL certificate with the correct names, don't they?