Why do I get this error in my Next.js app?

TypeError: relativeURL.replace is not a function. (In 'relativeURL.replace(/^/+/, '')', 'relativeURL.replace' is undefined)

Request.js file

const API_KEY = process.env.API_KEY

const requests = {
  fetchTrending: {
    title: 'Trending',
    url: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
  },
}

export default requests

axios.js file

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.themoviedb.org/3/',
})

export default instance

Banner.js file

import React, { useState, useEffect } from 'react'
import { InformationCircleIcon, PlayIcon } from '@heroicons/react/solid'
import axios from '../axios'
import requests from '../Requests'
import Image from 'next/image'

function Banner() {
  const [movie, setMovie] = useState([])
  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(requests.fetchTrending)
      setMovie(
        request.data.results[
          Math.floor(Math.random() * request.data.results.length - 1)
        ]
      )
      return request
    }
    fetchData()
  }, [])

  console.log(movie)

  function truncate(string, n) {
    return string?.length > n ? string.substring(0, n - 1) + '...' : string
  }

  return (
    <header className="relative h-[100vh] w-[100vw] bg-black">
      <div className="relative z-50 ml-10 h-[190px] pt-10">
        <Image
          src={`https://image.tmdb.org/t/p/original/${movie?.backdrop_path}`}
          layout="fill"
          objectFit="contain"
          objectPosition="left"
        />
 </div>
    </header>