use in React-routerV6 , error: `Uncaught TypeError: pathname.match is not a function`

[ruoduan-hub]

import React, { useLayoutEffect } from 'react';
import { Outlet, withRouter } from 'umi';
import styles from './index.less';
import { RecoilRoot } from 'recoil';
import { SafeArea } from 'antd-mobile';
import { AnimatedRoute } from 'react-router-transition';

export default withRouter(function Layout({ location }) {
  // const location = window.location;

  // useLayoutEffect(() => {
  //   EventHammerBody();
  // }, []);
  return (
    <div className={styles.page}>
      <RecoilRoot>
        <SafeArea position="top" />
        <AnimatedRoute
          component={<Outlet />}
          path={location?.pathname}
          atEnter={{ offset: -100 }}
          atLeave={{ offset: -100 }}
          atActive={{ offset: 0 }}
          mapStyles={(styles: { offset: any; }) => ({
            transform: `translateX(${styles.offset}%)`,
          })}
        />
      </RecoilRoot>
    </div>
  );
});

and

type error:

类型“{ component: Element; path: string | undefined; atEnter: { offset: number; }; atLeave: { offset: number; }; atActive: { offset: number; }; mapStyles: (styles: { offset: any; }) => { transform: translateX(${any}%); }; }”缺少类型“Readonly”中的以下属性: exact, render, sensitive, strict

refer to link 👇🏻

http://maisano.github.io/react-router-transition/animated-route/code