Bad Request (Reason: You're speaking plain HTTP to an SSL-enabled server port) error message

I have a simple react app , that I am tracking using Tag Manager Container install code.

I have 2 instances of Matomo, http (on port 8080) and https (on port 8443).

When I create a container on the http instance and add it to my app, it works. However when I create a container on the https instance and add it to my app and I load my app on http://localhost:3000 and open up developer tools under console the error message is -

Failed to load resource: the server responded with a status of 400 (Bad Request)

Also the request URL is listed as : http://url:8443/matomo.php?action_name
When I enter this URL into the browser, I get -

Bad Request
Your browser sent a request that this server could not understand.
Reason: You’re speaking plain HTTP to an SSL-enabled server port.
Instead use the HTTPS scheme to access this URL, please

But if I create a container from the http instance then I get no errors and that url doesn’t give that bad request error when pasted into the browser.

Is this happening because I am trying to communicate to a https instance of matomo and my app is http, do I make my app use https as well for this to work?