AxiosError 도와주세요...

import axios from '../../api/axios';
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

export default function DetailPage() {
  const { movieId } = useParams();
  const [movie, setMovie] = useState({});

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(`/movie/${movieId}`);
      // setMovie(request.data);
      console.log(request);
    }

    fetchData();
  }, [movieId])
  
  // if (!movie) return null;
  
  console.log(movie);
  return (
    <section>
      <img
        className='modal__poster-img'
        src={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
        alt="modal__poster-img" 
      />
    </section>
  )
}

안녕하세요, 위와 같이 디테일페이지 코드를 영상을 보면서 하고 있는데.. 콘솔에서 리퀘스트를 불러올 때 에러가 뜹니다.

Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

디테일 페이지에서만 위와 같은 에러가 왜 뜨는 건지 모르겠어서 문의글 남깁니다 ㅠㅠ

import axios from "axios";

const instance = axios.create({
  baseURL: 'https://api.themoviedb.org/3',
  params: {
    api_key: "***",
    language: "ko-KR",
  }
})

export default instance;

<Route path=':movieId' element={ <DetailPage /> }></Route>

const { movieId } = useParams();
  const [movie, setMovie] = useState({});

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(`/movie/${movieId}`);
      setMovie(request.data);
      // console.log(request);
    }

    fetchData();
  }, [movieId])