sending data with context api to components that have parameter in their route

Question

sorry about the bad question title:(

im trying to fetch data and send it to other components by context api. but i have a problem with routes that have parameters in their path for example when im trying to access the data in "MoviePage" component that its route is

<Route path="movie/:id" element={<MoviePage />} />

i cant access to the data in this component and returns error bad request

this is the context file:

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const API_URL = './JSON/data.json';
export const MainContext = React.createContext({id: 1})

const ContextData = ({ children }) => {
  const [data, setData] = useState([])
  useEffect(() => {
  axios.get(API_URL)
      .then(res => setData(res.data))
  }, [])
  
  return(
    <MainContext.Provider value={ data }>
     { data && data.length && children }
    </MainContext.Provider>
    )
}

export default ContextData;

but as i said i have no problem with other compoents and pages that have not parameters in their routes