JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<script src="https://openlayers.org/en/latest/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a WMS source</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
    #hiddenolmap { display:none; position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<div id="hiddenolmap"></div>
</body>
</html>

JavaScript

// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'pk.eyJ1IjoiYWxpc3VtZXIiLCJhIjoiY2o2NHVjdHdwMXhlNDMydDZuaDF0ZW5yMCJ9.r0a31QnkobaovXbuGTL3bg';
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 8,
center: [-74.5447, 40.6892]
});

function createTexture(context, canvas) {
 
 let gl = context.gl;
 let texture = gl.createTexture();
 gl.bindTexture(gl.TEXTURE_2D, texture);
 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
 gl.generateMipmap(gl.TEXTURE_2D);
 return texture;
 }
 
map.on('load', function () {

      
//Set up dummy tile layer for listening tiles.
    map.addSource( "dummy-tile-source", {
            'type': 'raster',
            'tiles': [
            'https://upload.wikimedia.org/wikipedia/commons/4/48/BLANK_ICON.png'
            ],
            'tileSize': 256
            });

    map.addLayer(
                {
                'id':    "dummy-tile-layer",
                'type': 'raster',
                'source':   "dummy-tile-source",
                'paint': {}
                },'aeroway-line');

// Register any projection other than web mercator 

proj4.defs("EPSG:6527","+proj=tmerc +lat_0=38.83333333333334 +lon_0=-74.5 +k=0.9999 +x_0=150000 +y_0=0 +ellps=GRS80 +units=us-ft +no_defs");
ol.proj.proj4.register(proj4);

// Set up hidden ol map 

let wmslayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
          url: 'https://img.nj.gov/imagerywms/Natural2015',
          crossOrigin: '',
          params: {
            'LAYERS': 'Natural2015',
            'SRS' : "EPSG:6527"
          },
          projection: 'EPSG:6527'
        })
      });
  
let olmap = new ol.Map({
        layers: [wmslayer],
        target: 'hiddenolmap',
        view: new ol.View({
          projection: 'EPSG:3857'
        })
      });


 
  // Listen dummy source to get tiles needed. 

  map.on('dataloading',...