Apache proxy issue when using socket.io

Question

I am facing the following issue, using nodejs and react on a Wamp server. I have to mention that I do not render my React app using the express server. I have 500 internal error when inspecting in browser and GET /socket.io/?EIO=3&transport=polling&t=NSPfrNh 404 on backend, but I think the main issue is from the Apache, whos virtual host looks like this:

<VirtualHost *:8085>
  ServerName localhost
  ServerAlias localhost
  DocumentRoot "${INSTALL_DIR}/frontend"
  <Directory "${INSTALL_DIR}/frontend/">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
    #Require local
  </Directory>
ProxyRequests off
        ProxyVia on
        RewriteEngine On

        RewriteEngine On
        RewriteCond %{HTTP:Connection} Upgrade [NC]
        RewriteCond %{HTTP:Upgrade} websocket [NC]
        RewriteRule /(.*) ws://http://machineIp:8085/$1 [P,L]

        ProxyPass               / http://machineIp:8085/
        ProxyPassReverse        / http://machineIp:8085/



</VirtualHost>

But when I checked the appache error log I see the following message: No protocol handler was valid for the URL /socket.io/ (scheme 'https'). If you are using a DSO version of mod_proxy, make sure the proxy submodules are included in the configuration using LoadModule., referer: http://machineIp:8085/ticketalocation

Here is my backend nodejs code:

var cors = require('cors')
const express       = require('express');
const path          = require('path');
const cookieParser  = require('cookie-parser');
const logger        = require('morgan');
const passport      = require('passport')
const session       = require('express-session')
const winston = require('winston');
const indexRouter   = require('./routes/index');
const authRouter    = require('./routes/auth');
const apiRouter     = require('./routes/api');
const app = express();
const httpServer = http.createServer(app);

const io = require('socket.io')();

io.on('connection', (client) => {
  client.on('subscribeToTimer', (interval) => {
    console.log('client is subscribing to timer with interval ', interval);
    setInterval(() => {
      client.emit('timer', new Date());
    }, interval);
  });
});

const port = 8085;
io.listen(port);
console.log('listening on port ', port);
app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://machineIP:8085');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept-Type');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
})

And here is my client React code - api.js:

import openSocket from 'socket.io-client';
const  socket = openSocket('http://machineIp:8085');
function subscribeToTimer(cb) {
  socket.on('timer', timestamp => cb(null, timestamp));
  socket.emit('subscribeToTimer', 1000);
}
export { subscribeToTimer };

Which I use in other js file- TicketAllocation:

import { subscribeToTimer } from "../../API/api.js";


class TicketAlocation extends React.Component {
  constructor(props) {
    super(props);
   
    const { cookies } = props;
    this.state = {
     
      timestamp: 'no timestamp yet'
    };
    subscribeToTimer((err, timestamp) => this.setState({ 
      timestamp 
    }));
                      }
    
render() {

  return (
    <div>
     <p>
          This is the timer value: {this.state.timestamp}
    </p>
    </div>
  );
}
  }