Analytics and SpeedInsights fail to build

I'm pretty new to webdev, but was able to get the site up and running. I'm running a react app and when running npm build run after adding Analytics and SpeedInsights my builds fail. This is what I've done.

import { SpeedInsights } from "@vercel/speed-insights/next"
import { Analytics } from "@vercel/analytics/react"

function App() {


  return (
    <div className="container mx-auto">
   ...
      <SpeedInsights />
    </div>
  );
}

The error I'm getting is

error during build:
node_modules/@vercel/speed-insights/dist/next/index.mjs (129:9): "useParams" is not exported by "__vite-optional-peer-dep:next/navigation.js:@vercel/speed-insights", imported by "node_modules/@vercel/speed-insights/dist/next/index.mjs".
file: /Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/@vercel/speed-insights/dist/next/index.mjs:129:9

127:   const setScriptRoute = useRef(null);
128:   useEffect(() => {
129:     if (!setScriptRoute.current) {
              ^
130:       const script = injectSpeedInsights({
131:         framework: props.framework || "react",

    at getRollupError (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
    at error (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/parseAst.js:388:42)
    at Module.error (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:13827:16)
    at Module.traceVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:14275:29)
    at ModuleScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:11990:39)
    at ReturnValueScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:7432:38)
    at FunctionBodyScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:7432:38)
    at Identifier.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:6908:40)
    at CallExpression.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:4775:23)
    at CallExpression.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:9135:15)

import { SpeedInsights } from "@vercel/speed-insights/next" import { Analytics } from "@vercel/analytics/react" function App() { return ( <div className="container mx-auto"> ... <SpeedInsights /> </div> ); }

error during build: node_modules/@vercel/speed-insights/dist/next/index.mjs (129:9): "useParams" is not exported by "__vite-optional-peer-dep:next/navigation.js:@vercel/speed-insights", imported by "node_modules/@vercel/speed-insights/dist/next/index.mjs". file: /Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/@vercel/speed-insights/dist/next/index.mjs:129:9 127: const setScriptRoute = useRef(null); 128: useEffect(() => { 129: if (!setScriptRoute.current) { ^ 130: const script = injectSpeedInsights({ 131: framework: props.framework || "react", at getRollupError (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/parseAst.js:392:41) at error (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/parseAst.js:388:42) at Module.error (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:13827:16) at Module.traceVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:14275:29) at ModuleScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:11990:39) at ReturnValueScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:7432:38) at FunctionBodyScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:7432:38) at Identifier.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:6908:40) at CallExpression.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:4775:23) at CallExpression.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:9135:15)