React useRouteMatch() - Invalid hook call

I have a demo here https://stackblitz.com/edit/react-ts-p5vdeq?file=Info.tsx

I'm tryint to create a simple nested navigation.

I have a two pages Home and Info

The Info page has navigation to show components on that page.

On the Info page I'm getting an error Invalid hook call. Hooks can only be called inside of the body of a function component.

The hook is being used in a function and I'm sure I'm not breaking the hooks rules.

Can any see why I'm getting this error

import React from "react";
import { Link, Route, useRouteMatch } from "react-router-dom";

const Info: React.FC = () => {
  const { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Info</h2>
      <ul>
        <li>
          <Link to={`${url}/linkone`}>Info Link One</Link>
        </li>
        <li>
          <Link to={`${url}/linktwo`}>Info Link Two</Link>
        </li>
      </ul>

      <div>
        <Route exact path={`${path}/linkone`}>
          <h1>Info One</h1>
        </Route>
        <Route exact path={`${path}/linktwo`}>
          <h1>Info Two</h1>
        </Route>
      </div>
    </div>
  );
};

export default Info;