How come i cannot access my EKS NLB from the internet

Question

I have a 3 Node EKS cluster running on AWS. it's a private cluster with in a private subnet with a bastion host in the public subnet. Both within the same VPC. The routing has been configured and it works as i have Internet Gateway configured and a NAT Gateway configured.

I have a react application running, which i have attempted to create a Network Load Balancer for. However when i navigate to the address in the browser i cannot seem the reach my React application. Prior to this i had tested this with a Classic Load Balancer and i was able to reach the React Application from the web browser. So i am not sure what the difference is with Network Load Balancer. The AWS NLB controller has also been installed properly.

kind: Service
apiVersion: v1
metadata:
  name: <svc-name>
  annotations:
    service.beta.kubernetes.io/aws-load-balancer-type: external
    service.beta.kubernetes.io/aws-load-balancer-subnets: private-subnet,public-subnet
    service.beta.kubernetes.io/aws-load-balancer-nlb-target-type: ip
    service.beta.kubernetes.io/aws-load-balancer-scheme: internet-facing
spec:
  selector:
    app: <pod-selector-name>
  type: LoadBalancer
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80

I also see that the Network Load Balancer was created in the AWS console with the state of active and a dns like k8s-XXXXXXxxxxxXXX-10fc47.elb.eu-west-1.amazonaws.com. i have tried using this dns in the browser like i would with a classic load balancer but it doesnt work.

When i look at the listeners I see the below image

And when i drill into the forwarding to see the targets i see some ip listed and in a healthy status, though non of these private IP addresses are the same as the EKS-nodes running the k8s React Application. so i am not sure if this is the reason.