how to go back to parent route with nested route

this is my parent.js

   <Router>
     <Switch>
       <Route path={`${match.path}/signup`} component={Signup} />
       <Route path={`${match.path}/login`} component={Login} />
       <Route path={`${match.path}/forgot-password`} component={ForgotPassword} />
     </Switch>
   </Router>

Login.js

<form onSubmit={submitHandler}>

        <div className={classes.control}>
          <label htmlFor='email'>Your Email</label>
          <input type='email' id='email' required ref={emailInputRef} />
        </div>
        <button
            type='button'
            className={classes.toggle}>
        Login
        </button>
        <div>
            Need an account? <Link to={`${match.path}/signup`}>Sign Up</Link>
        </div>
      </form>

Now from the Login.js, i want to route to match.path/signup which is this route below:

route path={`${match.path}/signup`} component={Signup} />

But because the Login.js is nested, if i click on the Link, it renders: match.path/login/signup which is obviously not a path...

I spent hours and still cant do it... Need really help with this