Client leaves channel when sending message in agora Web RTC - reactjs

Question

I am using Agora Web RTC SDK to create a messaging app, but when a client sends a message after successfully logging in and connecting to the channel, it leaves the channel on its own. I have also used event.preventDefault(), still the page reloads and the client leaves the channel.
Following is my code.
import AgoraRTM from 'agora-rtm-sdk';
import { useState } from 'react';
function Chat(){
const [messageContent,setMessageContent]=useState("");
const [channelName,setChannelName]=useState("");
const [channel,setChannel]=useState();
const [token,setToken]=useState();
const [uid,setUid]=useState();
const [userInChannel,setUserInChannel]=useState(false);
const client = AgoraRTM.createInstance("Actual appID", { enableLogUpload: false });
async function handleLogin(event){
await client.login({uid,token})
console.log(client);
setChannel(client.createChannel(channelName));
event.preventDefault();
}
async function handleJoin(){
await channel.join();
setUserInChannel(true);
}
async function handleSend(event){
await channel.sendMessage({text:messageContent})
event.preventDefault();
}
{userInChannel && channel.on('ChannelMessage',({message,memberID})=>{
console.log("channel Message:" ,message);
console.log("member ID:",memberID);
})}
return(
<div>
<form onSubmit={handleJoin}>
<input type='text' name='token' onChange={(event) => { setToken(event.target.value) }} placeholder="Token" />
<input type='text' name='channel' onChange={(event) => { setChannelName(event.target.value) }} placeholder="Channel Name" />
<input type='text' name='uid' onChange={(event) => { setUid(event.target.value) }} placeholder="Enter Uid" />
<div className='button-group'>
<button id='join' type='button' className='btn btn-primary btn-sm' onClick={handleLogin}>Login</button>
<button id='join' type='button' className='btn btn-primary btn-sm' onClick={handleJoin}>Join Channel</button>
</div>
</form>
<form onSubmit={handleSend}>
<input type="text" name="message" value={messageContent} placeholder='Enter your message...' onChange={(event)=>{setMessageContent(event.target.value)}} />
<button>Send</button>
</form>
</div>
)
}
export default Chat;