React Router Switch re-implementation

Example.jsx

import React from 'react';
import {
  BrowserRouter as Router,
  Link,
} from 'react-router-dom';
import Switch from './Switch';

const MyRoute = ({ name }) => {
  React.useEffect(() => {
    console.log('Mounted');
    return () => {
      console.log('Unmounted');
    };
  }, []);
  return <div>The route {name}</div>;
};

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/1">C 1</Link>
        <Link to="/1/4">C 2</Link>
      </div>
      <Switch>
        {{
          'exact /1': <MyRoute name="Number 1" />,
          '/1/:position': match => (
            <MyRoute name={`Number ${match.params.position}`} />
          ),
        }}
      </Switch>
    </Router>
  );
}

Switch.jsx

import React from 'react';
import {
  BrowserRouter as Router,
  matchPath,
  useLocation,
} from 'react-router-dom';

const Switch = ({ children: routes }) => {
  const route = useLocation().pathname;
  let realMatch = null;
  const current = Object.entries(routes).find(([path]) => {
    const exact = /^exact /.test(path);
    const match = matchPath(
      route,
      exact ? { exact: true, path: path.slice(6) } : { path }
    );
    if (match) {
      realMatch = match;
      return true;
    }
    return false;
  });
  if (current) {
    const renderable = current[1];
    if (typeof renderable === 'function') {
      return renderable(realMatch);
    }
    return renderable;
  }
  return null;
};