I’m working on a project that involves rendering GeoServer WFS layers on QGIS and React-Leaflet. However, I’m facing an issue where the layers are not rendering correctly. In my React-Leaflet implementation, I fetch GeoJSON data from my local GeoServer instance and use it to create a GeoJSON layer. However, for some reason, it’s not rendering correctly.

I think the problem must be a configuration on geoserver, i did the “default” way to upload layer, created workspace, store, layer, etc etc…
Seen some leaflet-geoserver-request but i couldnt implement in my react-leaflet
This is how i implement the layer inside MapComponent (simplified):

  //Linhas de plantio
    fetch('http://localhost:83/geoserver/SAIVIEW/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=SAIVIEW:analise_plantio&outputFormat=application%2Fjson&srsName=EPSG:4326')
    .then(response => response.json())
    .then(data => setlinhaplantioData(data));



        {/*Linha_plantio*/}
        {linhaplantio && linhaplantioData && <GeoJSON data={linhaplantioData}
        style={(feature) => ({
          color: feature.properties.PLANTIO2 === "Sem Falha" ? 'green' : 'red', // a cor da linha
          fillColor: feature.properties.PLANTIO2 === "Sem Falha" ? 'green' : 'red', // cor do preenchimento
          fillOpacity: 0.1, // opacidade do preenchimento
          weight: 2
        })}
        
        

My docker-compose:

version: "3.8"
services:
  geoserver:
    image: docker.osgeo.org/geoserver:2.23.0
    restart: always
    environment:
      - SKIP_DEMO_DATA=true
      - CORS_ENABLED=true
    volumes:
      - ./docker/geoserver/dados:/opt/dado
      - ./docker/geoserver/geoserver_data:/opt/geoserver_data:rw
      - ./web.xml:/opt/apache-tomcat-9.0.68/webapps/geoserver/WEB-INF/web.xml
    ports:
      - 83:8080
      

QGIS (should be getting the red layer, not the green one, they are both the same, the green one its being provided by geoserver (docker) :

webgis react-leaflet:

openlayers(provided by geoserver) , 100% right as should be: