I am trying to fetch some json data on IPFS but keep getting hit by this error in the console on page load (and on click).

Uncaught (in promise) TypeError: PubsubRouter is not a constructor: pubsub-adapter.js:17

Heres my basic App.tsx:

import { ipfsFetch } from "ipfs-fetch"
import React, { useState } from "react"
import "./App.css"

function App() {
    const [tokenId, setTokenId] = useState()

    const fetchOnIpfs = async (tokenId: number) => {
        return await ipfsFetch(`<cid>/${tokenId}.json`)
    }

    return (
        <div className='App'>
            <input onChange={e => setTokenId(e.target.value)} />
            <button onClick={() => fetchOnIpfs(tokenId)}>TEST</button>
        </div>
    )
}

export default App

I am using the ipfs-fetch package uses the ipfs-core under the hood. I've tried using ipfs-core directly and other package ipfs packages which all give the same error.

On the other hand, this works fine:

const { ipfsFetch } = require("ipfs-fetch")

const main = async () => {
    const res = await ipfsFetch("<cid>/1.json")
    console.log(res.toString())
}

main()

Which leads me to believe that the problem has to do with react. What am I doing wrong? Is there a better way to do this in react?