spring cloud gateway as oauth2 client and react app behind it getting 404 NOT FOUND

Question

i have an React App and Spring cloud gateway as oauth2 client and Spring authorization server as OAuth2 server , so wanna put my react app behind the gateway (BFF)

this is my gateway routes :

spring:
  cloud:
    gateway:
      default-filters:
        - DedupeResponseHeader=Access-Control-Allow-Credentials Access-Control-Allow-Origin
      routes:
        - id: api
          uri: http://192.168.111.58:8000
          predicates:
            - Path=/api/**
          filters:
            - SaveSession
            - TokenRelay
            - StripPrefix=1
        - id: ui
          uri: http://192.168.111.58:3000
          predicates:
            - Path=/ui/**

and my gateway security config :

@Configuration
@EnableWebFluxSecurity
public class OAuth2SecurityConfig {

    @Value(value = "${spring.security.oauth2.client.post-logout-redirect-uri}")
    private String postLogoutRedirectUri;

    @Bean
    public SecurityWebFilterChain securityWebFilterChain(ServerHttpSecurity http, ReactiveClientRegistrationRepository repository) {
//        http.headers(headerSpec -> headerSpec
//                .referrerPolicy(referrerPolicySpec -> referrerPolicySpec
//                        .policy(ReferrerPolicyServerHttpHeadersWriter.ReferrerPolicy.NO_REFERRER_WHEN_DOWNGRADE)));
//
//        http.csrf((csrf) -> csrf
//                .csrfTokenRepository(CookieServerCsrfTokenRepository.withHttpOnlyFalse())
//                .csrfTokenRequestHandler(new XorServerCsrfTokenRequestAttributeHandler()));

        http.csrf(ServerHttpSecurity.CsrfSpec::disable);

        http.authorizeExchange(authorize -> authorize.anyExchange().authenticated());

        http.oauth2Login(loginSpec -> loginSpec.authorizedClientRepository(authorizedClientRepository()))
                .logout(logoutSpec -> logoutSpec.logoutHandler(logoutHandler())
                        .logoutSuccessHandler(logoutSuccessHandler(repository))
                        .requiresLogout(ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, "/sign-out")));

        return http.build();
    }

    @Bean
    public ServerOAuth2AuthorizedClientRepository authorizedClientRepository() {
        return new WebSessionServerOAuth2AuthorizedClientRepository();
    }

    @Bean
    public ServerLogoutSuccessHandler logoutSuccessHandler(ReactiveClientRegistrationRepository repository) {
        OidcClientInitiatedServerLogoutSuccessHandler successHandler = new OidcClientInitiatedServerLogoutSuccessHandler(repository);
        successHandler.setPostLogoutRedirectUri(postLogoutRedirectUri);
        return successHandler;
    }

    private ServerLogoutHandler logoutHandler() {
        return new DelegatingServerLogoutHandler(new SecurityContextServerLogoutHandler());
    }
}

the react app running on 192.168.111.58:3000 the gateway running on 192.168.111.8060 the authorization server running on 192.168.111.58:8000

when i call the http://192.168.111.58:8060/ui from the browser, i redirect to 192.168.111.58:8000/login (oauth2 login page)

the problem is : after authenticate successfullyy the gateway log :

Handler is being applied: {uri=http://localhost:3000/ui, method=GET} Connecting to [localhost/127.0.0.1:3000]. HTTP/1.1 404 Not Found x-nextjs-cache: cache-control: x-powered-by: etag: content-type: vary: date: content-encoding: connection: transfer-encoding:

and doesnt redirect me to http://localhost:3000/ui