Multiple Web apps on publisher and dispatcher server

So I have my publisher server serving an AEM app over port 4503 and a react app over port 3480. Both render fine when accessing through the publisher url IP:port. 

The problem I'm having is with my dispatcher server. 

In my dispatcher.any I have 2 renderers 

 /renders

  {
    /renderer1

        {
         /hostname "publisher-ip"
         /port "4503"
        }
    /renderer2

       {
       /hostname "publisher-ip"
       /port "3480"
       }
   }

Then I have my /filters which allow urls for both renderers. But when loading either of my sites it doesn't know which renderer to get the content from. Both web apps have the same dispatcher url dispatcher.com just the paths are different. 

Is there anyway to specify which renderer a filter with choose from? Currently if I keep refreshing the page eventually it will get most resources from one renderer but it's always random.