coordinate system - OpenLayers 5 - WFS Projection Issue

I'm having trouble rendering my WFS features in projection EPSG:4326, the below code works when I switch projection to EPSG:3857 (and change the center), it works fine. I've checked the response from the server and its coming back as EPSG:4326 format. The projection in my Geoserver for this layer is EPSG:4326. Am I missing a setting somewhere in the openlayer code?

import WFS from 'ol/format/WFS';
import GML from 'ol/format/GML';
import Tile from 'ol/layer/Tile';
import Vector from 'ol/layer/Vector';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import Select from 'ol/interaction/Select';
import DragPan from 'ol/interaction/DragPan';
import Modify from 'ol/interaction/Modify';
import {Draw} from 'ol/interaction';
import VectorSource from 'ol/source/Vector';


import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
import {click, pointerMove, altKeyOnly} from 'ol/events/condition.js';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Snap from 'ol/interaction/Snap';
import {Map, View, Feature} from 'ol';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';



var formatWFS = new WFS( {
}
);

var formatGML = new GML({
    featureNS: 'http://wamp-dev/us',
    featureType: 'crop_other',
    srsName: 'EPSG:4326'
});


var xs = new XMLSerializer();

var sourceWFS = new VectorSource({
    loader: function (extent) {
        $.ajax('http://192.168.5.106:91/ows', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',

                request: 'GetFeature',
                typename: 'US:crop_other',
                srsname: 'EPSG:4326',
                bbox: extent.join(',') + ',EPSG:4326'
            }
        }).done(function (response) {
            console.log(response);
            sourceWFS.addFeatures(formatWFS.readFeatures(response, 
                {dataProjection: 'EPSG:4326', featureProjection:EPSG:4326'})
        );

        });
    },
    strategy: bboxStrategy
});

var layerWFS = new Vector({
    source: sourceWFS
});

var interaction;


var interactionSelectPointerMove = new Select({
    condition: pointerMove
});

var interactionSelect = new Select({
    style: new Style({
        stroke: new Stroke({
            color: '#FF2828'
        })

    })
});

var interactionSnap = new Snap({
    source: layerWFS.getSource()
});

var map = new Map({
    target: 'map',
    controls: [],

    interactions: [
        interactionSelectPointerMove,
        new MouseWheelZoom(),
        new DragPan()
    ],
    layers: [
        new Tile({
            source: new OSM({
                url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
                opaque: false,

                attributions: []
            })
        }),
        layerWFS
    ],
    view: new View({
        projection: 'EPSG:4326',
        center: [-119.934411,36.627444],
        //center: [-13350873.59,4401244.07],
        zoom: 15

    })
});