I'm just getting started with casl and it seems like I must be missing something. I created a file called can.js and it is exactly like the example in the docs:

import { createContext } from 'react';
import { createContextualCan } from '@casl/react';

export const AbilityContext = createContext();
export const Can = createContextualCan(AbilityContext.Consumer);

in my App.tsx I am using

let caslAbilities = new Ability(abilitiesJson); // from an API call returning json formatted abilities as described in docs
<AbilityContext.Provider value={caslAbilities}> 
   <Main />
</AbilityContext.Provider> 

Then inside Main.ts I define some routes like this:

import {Can} from "../Auth/can"; // the file defined above
<Can I={"read"} a={"Post"}> // this should always be false with my test abilities json
    <Route path="/reporting">
        <ReportingHome />
    </Route>
</Can>

When you click the restricted route the app throws an error:

Uncaught TypeError: t.on is not a function

Am I missing something obvious?