I'm having an issue with react router dom, Every time I click the sign in button that should take me to Chat.js but instead it just updates the link not the page.

Here’s my code in App.js

<Router> 
<Route exact path="/" component={Join}/> 
<Route path="/chat" component={Chat}/> 
</Router>

And in Join.js

import React, { useState } from "react";
import {Link} from "react-router-dom"

import "./Join.css"

function Join() {
    const [name, setName] = useState()
    const [room, setRoom] = useState()
    return (
        <div className="joinOuterContainer">
            <div className="joinInnerContainer">
            <h1 className="heading">Join</h1>
                <div><input className="joinInput" type="text" placeholder="Name" onChange={(e) => setName(e.target.value)}/></div>
                <div><input className="joinInput mt-20" type="text" placeholder="Room" onChange={(e) => setRoom(e.target.value)}/></div>
        
                <Link to={`/chat?name=${name}&room=${room}`}>
                    <button type="submit" className="button mt-20">Sign In</button>
                </Link>
            </div>
        </div>
    )
}

export default Join

I thought about adding arrow heads between the components i.e. {<Chat/>} and replacing component with element but it just won't work.. any thoughts on how to fix this?

Note: I'm using react v18 and react-router-dom v5