Percy is unable to do localhost call

Question

We're trying to test a web component hosted in storybook (a storybook static build). We're running a mock server using mocks-server. All of this works when hitting storybook's iframe page with a browser (e.g. http://localhost:6006/iframe.html?viewMode=story&id=, it even works fine when testing through Cypress.

But as soon as we try Percy, Percy is unable to deal with the network request to the mocks server and shows the following error in debug:

[percy:core:discovery] Encountered an error processing resource: http://localhost:3100/api/<endpoint> (0ms)
[percy:core:discovery] Error: Protocol error (Network.getResponseBody): No resource with given identifier found
    at file:///<path-to-app>/node_modules/@percy/core/dist/session.js:47:16
    at new Promise (<anonymous>)
    at Session.send (file:///<path-to-app>/node_modules/@percy/core/dist/session.js:45:12)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.request.response.buffer (file:///<path-to-app>/node_modules/@percy/core/dist/network.js:257:20)
    at async Network.onRequestFinished (file:///<path-to-app>/node_modules/@percy/core/dist/discovery.js:70:32)
    at async Session._handleLoadingFinished (file:///<path-to-app>/node_modules/@percy/core/dist/network.js:280:5) (0ms)

The path is added to the percy.yml file:

version: 2
snapshot:
  widths:
    - 375
    - 768
    - 1024
  minHeight: 812
  enable-javascript: true
discovery:
  allowed-hostnames:
    - localhost:3100
    ...

An example of how we tried to mount the web component in storybook would be something lie this:

const Template = (args) => {
  const [isLoaded, setIsloaded] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      await fetchApi({ ... });
      setIsloaded(true);
    };

    fetchData();
  }, []);
  return isLoaded ? (
    <>
      <web-component {...args}></web-component>
    </>
  ) : (
    <></>
  );
};

The one strange behaviour of the web component is that when it fetches data, it adds the response to the window object and then fires off custom event which then internally updates the web component, but this happens after the data has returned. From what I understand this happens after the fetch, so wondering why there would be an issue with Percy and that localhost url? This is driving Percy through Cypress, which successfully waits for the component to render. The snapshot is taken after this, like this:

it('should display component', () => {
  cy.visitStory();
  cy.get(selector, { includeShadowDom: true }).should('be.visible');
  cy.percySnapshot('<snapshot name>');
});