Create private chat with MERN and Socketio - node.js

Question

i want to send message to specific user from react-autocomplete dropdown menu with select and display that message in their own window. And also i am trying to save messages to my mongodb but when i check mongocompass server it is only showing me the _id and and when i click send button in front end it is sending same message multiple times .Here is what i have so far but it is sending the message to everyone. i need help to get my code right to create private chat with saving correctly to db and retrieve messages everytime page refreshes
CLIENT:
const [username, setUsername] = useState("");
const [onlineUsers, setOnlineUsers] = useState([]);
const [chatHistory, setChatHistory] = useState([]);
const ADDRESS = "http://localhost:1337";
const socket = io(ADDRESS, { transports: ["websocket"] });
useEffect(() => {
socket.on("connect", () => {
console.log("Connection established!");
});
socket.on("loggedIn", () => {
console.log("Successfully logged in");
fetchOnlineUsers();
});
socket.on("newConnection", () => {
console.log("Look! another client connected!");
fetchOnlineUsers();
});
socket.on("message", (newMessage) => {
console.log("new message received!", newMessage);
setChatHistory((currentChatHistory) => [
...currentChatHistory,
newMessage,
]);
});
}, []);
const handleSubmitMessage =(e)=> {
e.preventDefault();
const messageToSend = {
text: message,
sender: username,
id: socket.id,
timeStamp: Date.now()
}
socket.emit("sendmessage", messageToSend)
setChatHistory([...chatHistory, messageToSend])
setMessage("")
}
const handleOnSearch = (string, results) => {}
const handleOnHover = (result) => {}
const handleOnSelect = (item) => {
console.log("ITEM",item);
}
const handleOnFocus = () => {}
const formatResult = (item) => {
return (
<>
<span style={{ display: 'block', textAlign: 'left' }}>{item.username}</span>
</>
)
}
SERVER CODE
import express from "express";
import cors from "cors";
import mongoose from "mongoose";
import listEndpoints from "express-list-endpoints";
import { Server } from "socket.io";
import { createServer } from "http";
import MsgModel from './db/schema.js'
const { MONGO_URL } = process.env;
const app = express();
app.use(cors());
app.use(express.json());
const server = createServer(app);
const io = new Server(server);
const port = process.env.PORT || 1337;
let onlineUsers = [];
io.on("connect", (socket) => {
socket.join("main-room")
socket.on("setUsername", ({ username }) => {
onlineUsers = onlineUsers
.filter((user) => user.username !== username)
.concat({
username: username,
id: socket.id,
});
socket.emit("loggedIn");
socket.broadcast.emit("newConnection");
});
socket.on("sendmessage", (msg) => {
console.log("sendmessage",msg);
const saveMessageToDb = new MsgModel({msg:msg})
saveMessageToDb.save().then(()=> {
socket.to("main-room").emit("message", msg)
})
})
app.get("/online-users", (req, res) => {
res.send({ onlineUsers });
});
MONGOOSE SCHEMA
import mongoose from "mongoose";
const { Schema, model } = mongoose;
const msgSchema = new Schema(
{
msg: { type: String },
},
{ typeKey: '$type' }
);
export default model("Message", msgSchema);