URL Query Params returns [object%20Object]

Question

I used URLSearchParams() to extract data from my query parameters

My query param looks like this /?dt=Sample&ut=Sample%20Data

ContractView.tsx

import React, { ReactElement, useEffect, useState } from 'react'
import Viewer from './Viewer/Viewer'
import getContract from '../../services/getContract'

const ContractView = (): ReactElement => {
  const [contractFile, setContractFile] = useState<string>('')

  let dt: any
  let ut: any

  if (typeof window !== `undefined`) {
    const myKeys = window.location.search
    const urlParams = new URLSearchParams(myKeys)
    dt = urlParams.get('dt')
    ut = urlParams.get('ut')
  }

  useEffect(() => {
    const fetchData = async () => {
      const result = await getContract({
        document: dt,
        usage: ut,
      })
      if (result) {
        setContractFile(`${process.env.GATSBY_API_URL}/${result}`)
      }
    }
    fetchData()
  }, [])

  return <Viewer pdfFile={contractFile} />
}

export default ContractView

getContract.ts is just an imported function to get data from an API endpoint

Viewer.tsx is just a component with react-pdf to render the fetched PDF document resource from getContract

I always get this error

I used URLSearchParams() to extract data from my query parameters