How do I properly set up Browser exploitation Framework(BeeF) with ngrok?

Question

I have installed BeeF, and it works perfectly on my local network. I knew it wouldn't work over other networks, so i attempted to use ngrok. To replicate the issue, here are the following steps I have taken:

1. run sudo beef-xss start
2. login to the web GUI
3. cd into ngrok directory
4. run ./ngrok http 3000
5. copy ngrok http address

If I try to go to this address, it gives me the Apache "working" page. This is normal.

6. I add the sub directory /demos/butcher/index.html onto the link.
7. The link now looks like this: http://24e5-68-107-239-132.ngrok.io/demos/butcher/index.html
8. If I access it from a device that is on the same network as me, it only displays the page and does not hook the browser and the browser does not show up in the beef control panel. The same scenario happens when I try to access the link outside of the network. I am using Kali Linux, latest update, with the latest BeeF and ngrok.