400 error socket.io when trying to connect from client side - node.js

Question

I am setting up a little chat feature with socket.io
for some reason when I try to connect from client I am getting this error
I am initiating my connection in a chatProvider component in a react app.
Here is the client side connection function
import React, { useState, useEffect} from 'react';
import io from "socket.io-client";
const ChatProvider = ({ children }) => {
useEffect(() => {
const socket = io('http://localhost:5000');
socket.on('messageFromServer', (dataFromServer) => {
console.log(dataFromServer);
socket.emit('messageToServer', {data: "this is from client"})
})
}, [])
return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
};
ChatProvider.propTypes = { children: PropTypes.node.isRequired };
export default ChatProvider;
Here is my backend
const express = require('express');
const mongoose = require('mongoose');
const cookieSession = require('cookie-session');
const passport = require('passport');
const bodyParser = require('body-parser') // when a post request comes in to express, it doesnt automatically parse, you need to call body-parser
const keys = require('./config/keys');
const cors = require('cors');
const { setIO } = require('./helpers/socket-setup');
require("dotenv").config();
require('./models/GoogleUserModel'); // the user model must be placed before this services passport// this must be ran after requiring model bcuz this needs the model. ORDER
require('./models/UserModel');
require('./services/passport');
const app = express()
const server = require('http').createServer(app)
const corsOptions = {
origin:"http://localhost:3000",
credentials: true, //access-control-allow-credentials:true
optionSuccessStatus:200
}
app.use(cors(corsOptions))
mongoose.Promise = global.Promise;
mongoose.connect(keys.mongoURI, {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true
})
mongoose.connection.on('error', () => {
throw new Error (`unable to connect to database: ${keys.mongoURI}`)
});
app.use(bodyParser.json({limit: '10mb'}))
app.use(express.urlencoded( { extended: true }))
app.use(
cookieSession({
maxAge: 30 * 24 * 60 * 60 * 1000,
keys: [keys.cookieKey]
})
)
app.use(passport.initialize());
app.use(passport.session());
require('./routes/webhookRoutes')(app)
require('./routes/userRoutes')(app);
let io = setIO(server)
io.on("connection", socket => {
socket.emit('messageFromServer', { data: 'this is from server' });
socket.on('messageToServer', ( dataFromClient )=> {
console.log(dataFromClient);
})
})
const PORT = process.env.PORT || 5000;
server.listen(PORT);
Here is a helper file socket-setup.js I made so I can use socket.io functions within other files, could this be the issue?
const socket = require("socket.io")
let _io;
const setIO = (server) => {
_io = socket(server, {
cors : {
origin:"http://localhost:3000",
credentials: true, //access-control-allow-credentials:true
optionSuccessStatus:200
}
})
return _io
}
const getIO = () => {
return _io
}
module.exports = {
getIO,
setIO
}