Unable to view custom sidebar component created with react router in storybook

I am quite new to React and have been trying to create a custom sidebar component. Based on my understanding by going through different tutorials, this is what I have so far:

react-router-dom version: ^6.3.0 storybook: ^6.1.17

These are my components

sidebar.jsx

  const SidebarNav = styled.nav`
  background: #15171c;
  width: 250px;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  right: ${({ sidebar }) => (sidebar ? "0" : "-100%")};
  transition: 350ms;
  z-index: 10;
`;

const SidebarWrap = styled.div`
  width: 100%;
`;


const Sidebar = () => {
    const [sidebar, setSidebar] = useState(true);

    
    return (
        <>
          <IconContext.Provider value={{ color: "#fff" }}>
            <SidebarNav sidebar={sidebar}>
              <SidebarWrap>
                {sideBarData.map((item, index) => {
                  return <SubMenu item={item} key={index} />;
                })}
              </SidebarWrap>
            </SidebarNav>
          </IconContext.Provider>
        </>
      );



};

export default Sidebar;

sidebardata.jsx

export const sideBarData = [ {
    title: "Question 4", 
    path: "/test"
    }, 
    // {
    // title: "Question 5", 
    // path: "/testing"
    // }
];

sidebarsubmenu.jsx

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

const SidebarLink = styled(Link)`
display: flex;
color: #e1e9fc;
justify-content: space-between;
align-items: center;
padding: 20px;
list-style: none;
height: 60px;
text-decoration: none;
font-size: 18px;

&:hover {
    background: #252831;
    border-left: 4px solid green;
    cursor: pointer;
}
`;

const SidebarLabel = styled.span`
margin-left: 16px;
`;

const DropdownLink = styled(Link)`
background: #252831;
height: 60px;
padding-left: 3rem;
display: flex;
align-items: center;
text-decoration: none;
color: #f5f5f5;
font-size: 18px;

&:hover {
    background: green;
    cursor: pointer;
}
`;

const SubMenu = ({ item }) => {
const [subnav, setSubnav] = useState(false);

const showSubnav = () => setSubnav(!subnav);

return (
    <>
    <SidebarLink to={item.path}
    onClick={item.subNav && showSubnav}>
        <div>
        {item.icon}
        <SidebarLabel>{item.title}</SidebarLabel>
        </div>
        <div>
        {item.subNav && subnav
            ? item.iconOpened
            : item.subNav
            ? item.iconClosed
            : null}
        </div>
    </SidebarLink>
    {subnav &&
        item.subNav.map((item, index) => {
        return (
            <DropdownLink to={item.path} key={index}>
            {item.icon}
            <SidebarLabel>{item.title}</SidebarLabel>
            </DropdownLink>
        );
        })}
    </>
);
};

export default SubMenu;

BookSideBarLayout.jsx

import React from 'react';
import Sidebar from './BookSideBar';

function Layout(props) {
    return (
        <div>
            <div style={{display: "flex"}}>
            <Sidebar/>
            </div>
        </div>
    );
}

export default Layout;

BookSidebarRoutes.jsx

import React from "react";
import {BrowserRouter, Route,Routes} from "react-router-dom";

import Support  from "./Support";
import Layout from "./BookSideBarLayout";



function MyRoutes() {
    return (
      <BrowserRouter>
        <Layout/>

          
        <Routes>
        {/* <Route path="/" element={<Sidebar/>}/> */}
        <Route path="/test" element={<Support/>}/>
        </Routes>
            
        </BrowserRouter>

    );
}

export default MyRoutes;

The story that I created was as below

import { storiesOf } from '@storybook/react';
import StoryRouter from 'storybook-react-router';
import MyRoutes from '../../src/components/BookSidebarRoutes';

// export default {
//     title: 'Side Bar',
//     //decorators : [(Story) => (<MemoryRouter><Story/></MemoryRouter>)]
  
// };

storiesOf('Params', module)
  .addDecorator(StoryRouter())
  .add('params', () => (
    <MyRoutes/>
  ));




export const Default = () => <MyRoutes />;

After I run my story above, I keep getting the error as below:

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.**

I also tried Switch in the MyRoutes component but that too didn't work. Any guidance in this will be really helpful. Thank you in advance