[SOLVED] Issue with React Flow and Zoom Pane error

I am having some issues with React Flow working in my react project. I had it working in another project and I wanted to migrate some of the functionality to another, but when I do I get the following...

Uncaught TypeError: selection.interrupt is not a function
    at zoom.transform (zoom.js:91:1)
    at slicedToArray.js:8:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)
    at performSyncWorkOnRoot (react-dom.development.js:22269:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)
index.js:1 
        
       The above error occurred in the <ZoomPane> component:

    at ZoomPane (http://localhost:3000/static/js/61.chunk.js:3828:21)
    at FlowRenderer (http://localhost:3000/static/js/61.chunk.js:4650:23)
    at GraphView (http://localhost:3000/static/js/61.chunk.js:5460:24)
    at Provider (http://localhost:3000/static/js/61.chunk.js:9897:29)
    at Wrapper (http://localhost:3000/static/js/61.chunk.js:5836:23)
    at div
    at http://localhost:3000/static/js/61.chunk.js:5904:20
    at div
    at div
    at div
    at Card (http://localhost:3000/static/js/53.chunk.js:123322:75)
    at div
    at http://localhost:3000/static/js/53.chunk.js:128284:75
    at div
    at http://localhost:3000/static/js/53.chunk.js:128474:34
    at div
    at form
    at Form (http://localhost:3000/static/js/53.chunk.js:170528:19)
    at SizeContextProvider (http://localhost:3000/static/js/53.chunk.js:124433:23)
    at InternalForm (http://localhost:3000/static/js/53.chunk.js:127126:69)
    at AddEditForm (http://localhost:3000/78.bd17ba31b4ff8371d2e4.hot-update.js:195:86)
    at Edit (http://localhost:3000/static/js/78.chunk.js:1360:18)
    at Route (http://localhost:3000/static/js/53.chunk.js:247458:29)
    at Switch (http://localhost:3000/static/js/53.chunk.js:247660:29)
    at Index (http://localhost:3000/static/js/78.chunk.js:1941:5)
    at Route (http://localhost:3000/static/js/53.chunk.js:247458:29)
    at Switch (http://localhost:3000/static/js/53.chunk.js:247660:29)
    at Suspense
    at AppViews
    at main
    at Basic (http://localhost:3000/static/js/53.chunk.js:130693:25)
    at Adapter (http://localhost:3000/static/js/53.chunk.js:130676:79)
    at div
    at section
    at BasicLayout (http://localhost:3000/static/js/53.chunk.js:130708:76)
    at Adapter (http://localhost:3000/static/js/53.chunk.js:130676:79)
    at section
    at BasicLayout (http://localhost:3000/static/js/53.chunk.js:130708:76)
    at Adapter (http://localhost:3000/static/js/53.chunk.js:130676:79)
    at section
    at BasicLayout (http://localhost:3000/static/js/53.chunk.js:130708:76)
    at Adapter (http://localhost:3000/static/js/53.chunk.js:130676:79)
    at AppLayout (http://localhost:3000/static/js/main.chunk.js:6211:5)
    at ConnectFunction (http://localhost:3000/static/js/53.chunk.js:244507:75)
    at Route (http://localhost:3000/static/js/53.chunk.js:247458:29)
    at RouteInterceptor (http://localhost:3000/static/js/main.chunk.js:9118:5)
    at Switch (http://localhost:3000/static/js/53.chunk.js:247660:29)
    at FormProvider (http://localhost:3000/static/js/53.chunk.js:170681:31)
    at LocaleProvider (http://localhost:3000/static/js/53.chunk.js:131362:94)
    at ProviderChildren (http://localhost:3000/static/js/53.chunk.js:124715:24)
    at LocaleReceiver (http://localhost:3000/static/js/53.chunk.js:131233:94)
    at ConfigProvider (http://localhost:3000/static/js/53.chunk.js:124823:13)
    at IntlProvider (http://localhost:3000/static/js/53.chunk.js:243112:43)
    at Views (http://localhost:3000/static/js/main.chunk.js:9152:5)
    at ConnectFunction (http://localhost:3000/static/js/53.chunk.js:244507:75)
    at C (http://localhost:3000/static/js/53.chunk.js:247715:37)
    at Route (http://localhost:3000/static/js/53.chunk.js:247458:29)
    at Switch (http://localhost:3000/static/js/53.chunk.js:247660:29)
    at Router (http://localhost:3000/static/js/53.chunk.js:247089:30)
    at BrowserRouter (http://localhost:3000/static/js/53.chunk.js:246710:35)
    at ThemeSwitcherProvider (http://localhost:3000/static/js/53.chunk.js:212584:23)
    at Provider (http://localhost:3000/static/js/53.chunk.js:244218:20)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:68:97)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

I decided maybe what I had before had some sort of flaw, and I had mui in the original and ant in the other, so I used an example to test out if it was that or not. I used this and nothing worked I still recieved the same interrupt error as before. I know I have done an npm i react-flow-renderer. I copied the example line for line and I am still not getting anywhere. Anyone have any suggestions or work arounds?

React is 17.0.1 React-Flow-Renderer is 10.3.16

Both are the same as my other project.