Storybook: How can I test a route based animation?

I have a TabBar component that looks like this:

It is based on Material UI's Tab component, so the black bar should animate and slide to the other tab when I click on a TabItem, which is a Link under the hood.

import React from 'react';
import { useLocation } from 'react-router-dom';

import TabBar from './TabBar';
import TabItem from './TabItem';

export default {
  title: 'Layouts/TabBar',
  component: TabBar,
};

const Template = () => {
  // const location = useLocation()
  return (
    <TabBar value={"/accounts"}>
      <TabItem value="/accounts" label="Accounts" to="/accounts" /> // clicking on this does nothing
      <TabItem value="/claims" label="Claims" to="/claims" /> // clicking on this does nothing
    </TabBar>
  )
}

export const Default = Template.bind({});
Default.args = {};

import React from 'react';
import styled, { useTheme } from 'styled-components';
import PropTypes from 'prop-types';
import MuiTabs from '@material-ui/core/Tabs';

const StyledMuiTabs = styled(MuiTabs)``;

const TabBar = ({ children, value, className }) => {
  const {
    colors: {
      text: { primary },
    },
  } = useTheme();

  return (
    <StyledMuiTabs
      TabIndicatorProps={{ style: { background: primary, height: '3px' } }}
      value={value}
      className={className}
    >
      {children}
    </StyledMuiTabs>
  );
};

TabBar.propTypes = {
  value: PropTypes.any,
};

export default TabBar;

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import MuiTab from '@material-ui/core/Tab';

import Title1 from './Title1';

const Label = styled(Title1)`
  padding-bottom: 5px;
`;

const StyledMuiTab = styled(MuiTab)`
  ${Label} {
    text-transform: none;
  }
`;

const TabItem = ({ value, label, to, className }) => (
  <StyledMuiTab
    component={Link}
    label={<Label>{label}</Label>}
    to={to}
    disableRipple={true}
    value={value}
    className={className}
  />
);

TabItem.propTypes = {
  label: PropTypes.string.isRequired,
  value: PropTypes.any,
  to: PropTypes.string.isRequired,
};

export default TabItem;

However, I don't know how to activate a route change in a storybook story. Currently, clicking on the link does not change the path at all.

Is there a way to just link to the same story but attach a query string? That way I can link to something like

http://localhost:9009/?path=/story/layouts-tabbar--default?clicked_tab=Claims or

http://localhost:9009/?path=/story/layouts-tabbar--default?clicked_tab=Account