How to use esri-resource-proxy with React and ArcGIS Server JavaScript API?

Question

I'm trying to add a publicly-accessible WMS layer to an ArcGIS Server JavaScript API v4 map: https://environment.data.gov.uk/spatialdata/special-protection-areas-england/wms

I'm adding it as a WMS layer in a simple stand-alone map served by my local webserver at http://localhost/whatever/index.html:

let layer = new WMSLayer({
 url: "https://environment.data.gov.uk/spatialdata/special-protection-areas-england/wms",
 sublayers: [{name: "Special_Protection_Areas_England"}]
});

Because the WMS server does not support CORS, this returns an error:

Access to fetch at 'https://environment.data.gov.uk/spatialdata/special-protection-areas-england/wms?SERVICE=WMS&REQUEST=GetCapabilities' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

So I send all requests to the UK Environment Department's WMS server via the Esri Resource Proxy which I've also installed on my local computer's web server as http://localhost/proxy/proxy.php:

urlUtils.addProxyRule({
 urlPrefix: "https://environment.data.gov.uk/",
 proxyUrl: "/proxy/proxy.php"
});

Requests to the WMS layer are therefore routed via http://localhost/proxy/proxy.php?https://environment.data.gov.uk/spatialdata/special-protection-areas-england/wms... and since my standalone HTML page is also served by http://localhost it works correctly.

Now I need to add this layer to a React application that's running on http://localhost:3000 and since this is on a different port to the proxy at http://localhost/proxy/proxy.php the request again fails:

Access to fetch at 'http://localhost/proxy/proxy.php?https://environment.data.gov.uk/arcgis/rest/services/NE/SitesOfSpecialScientificInterestEngland/FeatureServer/0?f=json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How can I use the Esri reverse proxy when it's on a different port to the React application?

(I'm undertaking the development on http://localhost:3000 but eventually this application will be served by Amazon Amplify, if that makes any difference.)