Request payload is transformed to query params after POST request

I have a React application where I am sending form data to the server using axios.

I am able to send the data and the database is also updated. The problem is, after sending the request, the data in the form is getting attached to the url as though I was passing query params.

Here is the component with the form

import React from 'react'
import axios from '../../axios'

function HomePage(props) {
    const [name, setName] = React.useState('')
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')

    const handleChange = (event) => {
        switch(event.target.name) {
            case "name":
                setName(event.target.value)
                break
            case "email":
                setEmail(event.target.value)
                break
            case "password":
                setPassword(event.target.value)
                break
            default:
                break
        }
    }

    const validation = () => {
        let isValid = true
        return isValid
    }

    const handleSubmit = () => {
        if(validation()) {
            let data = {
                name: name,
                email: email,
                password: password
            }

            axios.post('/user/create-user', data)
                .then(response => {
                    console.log(response)
                })
                .catch(error => {
                        console.log(error)
                    })
        }
    }

    return (
        <div>
            <form>
                <input 
                    type="text" 
                    required
                    name="name" 
                    value={name} 
                    onChange={handleChange}/>
                <input 
                    type="email" 
                    required
                    name="email" 
                    value={email} 
                    onChange={handleChange}/>
                <input 
                    type="password" 
                    required
                    name="password" 
                    value={password} 
                    onChange={handleChange}/>
                <button 
                    type="submit" 
                    onClick={handleSubmit}>Submit</button>
            </form>
        </div>
    )
}

export default HomePage

After clicking on submit button, I see the url with form data in the browser.

I can also see the status (canceled) in dev tools.

I think the browser is navigating to the new url with query params, I don't know why.It's not just in Chrome.

The console is showing "Navigated to" in blue with the unwanted route with query params.

Any help will be appreciated.