react router relative link does not link properly

So I'm using the npm package react-router-relative (https://www.npmjs.com/package/react-router-relative) but it doesn't seem to be switching the url properly.

Here's what my links looks like:

<Link to='items' className="btn btn-default submission-button">Items</Link>
<Link to='maps' className="btn btn-default submission-button">Maps</Link>

Here's my routing:

<Route path="submissions" component={SubmissionPage}>
    <Route path="items" component={ItemSubmissions}></Route>
    <Route path="maps" component={MapSubmissions}></Route>
</Route>

what happens is the first time I click on the link it'll link properly i.e.

http://localhost:3000/#/account/submissions/items

but when I hit it again it'll go to:

http://localhost:3000/#/account/submissions/items/items

at this point the end part will switch rather than append, but throws an error.

However, I'm trying to make the part right after 'submission' switch, i.e. account/submissions/items account/submissions/maps.

What am I doing wrong?

I've tried a non-relative link variation of this, i.e. {this.props.location.pathname + '/items'} but it just does the same thing.