Adding headers to an image uri when using ngrok with react native

I have setup a local server using xampp and have setup ngrok, this works good. The problem is it brings up a browser warning page which messes up loading the image. If the headers are applied it skips this. However I can add headers to a fetch like so without error :

Without using ngrok

await fetch('http://localhost/test.php')
    .then(response => response.json())
    .then(response => set({pokemon: response}))
}

When using ngrok

   fetchPokemon: async () => {
    await fetch('https://3fc3-188-74-84-44.ngrok-free.app/test.php', {
      method: "get",
      headers: new Headers({
        "ngrok-skip-browser-warning": "69420",
      }),
    })
        .then(response => response.json())
        .then(response => set({pokemon: response})).catch((error) => {
          alert(error);
        })
}

Yet when I try to use headers when loading an image I get an error. I have tried like this :

Without using ngrok

 <Image
    source={{ uri: 'http://192.168.4.31/users/'+item.userID+'/profile.jpg?' + currentDate}}

When using ngrok

    <Image source={{ uri: imgURL, 
      method: "get",
      headers: new Headers({
        "ngrok-skip-browser-warning": "69420",
      }),
}}

I get this error :

ERROR Warning: Failed prop type: Invalid prop source supplied to Image, expected one of type [string, number].

I have looked at all the documentation and I can not work out what I am doing wrong?

Any help would be appreciated.