How to use Chakra UI Fade transition in react router dom?

I am making a project using ChakraUI and React. So what I wanted to do is that to add some small animations in my project. Trying to implement the ChakraUI Fade component with react router dom, but I don't know how to use it properly. So my sidebar has multiple options. These options may or may have submenus in it. What I wanted to do is that, when someone clicks in the option or any submenu, it will load the page after the Fade transition. What I have done so far in my sidebar component

const SidebarTitle = () => {
  return (
    <>
      <Box
        width='200px'
        height='160px'
        textAlign='start'
        bgColor='#473198'
        px={5}
        borderRadius={2}
      >
        <Text fontSize='2xl' color='white' fontFamily='Fjord One'>
          some text
        </Text>
      </Box>
    </>
  );
};

export default function Sidebar() {
  const [selectedSubMenu, setSelectedSubMenu] = useState("");

  const handleClick = (title) => {
    if (title === selectedSubMenu) {
      setSelectedSubMenu("");
    } else {
      setSelectedSubMenu(title);
    }
  };

  return (
    <div>
      <Box
        display='flex'
        justifyContent='flex-start'
        alignItems='flex-start'
        mb={10}
      >
        <Box>
          <SidebarTitle />
          {sidebarItems.map((items) => {
            return (
              <Box
                width='200px'
                textAlign='start'
                cursor='pointer'
                onClick={() => {
                  handleClick(items.title);
                }}
                fontFamily='Fjord One'
                boxShadow='lg'
                _hover={{
                  bgColor: "#1a2963",
                  color: "white",
                }}
                key={items.title}
              >
                <Link
                  to={items.url}
                  as={RouterLink}
                  width='100%'
                  _focus={{
                    boxShadow: "none",
                  }}
                  style={{ textDecoration: "none" }}
                >
                  <Text fontSize='xl'>{items.title}</Text>
                </Link>

                <Collapse
                  in={items.title === selectedSubMenu}
                  transition={{ enter: { delay: 0.1 }, exit: { delay: 0.1 } }}
                >
                  {items.subMenu?.map((item) => {
                    return (
                      <Box
                        bgColor='#e4e8e5'
                        boxShadow='md'
                        textAlign='start'
                        width='200px'
                        color='black'
                        _hover={{
                          bgColor: "#666666",
                          color: "white",
                        }}
                        key={item.title}
                        onClick={(event) => {
                          event.stopPropagation();
                        }}
                      >
                        <Link
                          to={item.url}
                          as={RouterLink}
                          width='100%'
                          _focus={{
                            boxShadow: "none",
                          }}
                          style={{ textDecoration: "none" }}
                        >
                          <Text fontFamily='Fjord One'>{item.title} </Text>
                        </Link>
                      </Box>
                    );
                  })}
                </Collapse>
              </Box>
            );
          })}
        </Box>

        <Box width='100%'>
          <Routes>
            <Route path='/' element={<Home />} />
            <Route
              path='about'
              element={<about />}
            />
            <Route
              path='product'
              element={<product />}
            />
            <Route
              path='dummy-link'
              element={<dummy-link />}
            />
            <Route path='dummy-link' element={<dummy-link />} />
            <Route path='dummy-link' element={<dummy-link />} />
            <Route path='dummy-link' element={<dummy-link />} />
            <Route path='dummy-link' element={<dummy-link />} />
          </Routes>
        </Box>
      </Box>
    </div>
  );
}

Can someone help me on how to implement the Fade transition in react router dom?