k8s react app service white page when using prefix path with ingres

Question

i have 2 services in my cluster: foo=react goo=other app not react I want the ingress to route /foo to fooservice.

This is fooservice (run react app):

apiVersion: v1
kind: Service
metadata:
  name: fooservice
spec:
  type: ClusterIP
  selector:
    app: fooservice
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
[apiVersion: v1
kind: Service
metadata:
  name: fooservice
spec:
  type: ClusterIP
  selector:
    app: fooservice
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000

when this is the ingress.yaml i get white page for foo , (goo works fine, it is not a react app) fails to load statics (in the network)

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myapps-ingress
  namespace: namespace1
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  ingressClassName: nginx
  rules:
  - http:
      paths:
        - path: /foo
          pathType: Prefix
          backend:
            service:
              name: fooservice
              port:
                number: 80
        - path: /goo
          pathType: Prefix
          backend:
            service:
              name: gooservice
              port:
                number: 80

when i change the ingress to this it works but i get fooservice from both / and /foo and i dont want this behaivor:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myapps-ingress
  namespace: namespace1
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  ingressClassName: nginx
  rules:
  - http:
      paths:
        - path: /
          pathType: Prefix
          backend:
            service:
              name: fooservice
              port:
                number: 80
        - path: /goo
          pathType: Prefix
          backend:
            service:
              name: gooservice
              port:
                number: 80