I am getting error while using MapBox

Error: Cannot set properties of undefined (setting ‘_eventEmitter’)
at MapboxGeocoder (http://localhost:3000/static/js/bundle.js:92801:22)
at renderWithHooks …

This is AddLocation.js

import React from 'react'
import ReactMapGL,{Marker} from 'react-map-gl';
import {Box} from '@mui/material';
import { useValue } from '../../../context/ContextProvider';
import 'mapbox-gl/dist/mapbox-gl.css';

const AddLocation = () => {
  const {state:{location:{lng,lat}},dispatch}=useValue();
  return (
    <Box sx={{
      height:400,
      position:'relative',
    }}>
      <ReactMapGL mapboxAccessToken={process.env.REACT_APP_MAP_TOKEN}
      initialViewState={{
        longitude:lng,
        latitude:lat,
        zoom:8}}
        mapStyle='mapbox://styles/mapbox/streets-v11'>
          <Marker 
          latitude={lat}
          longitude={lng}
          draggable
          onDragEnd={(e)=>dispatch({type:'UPDATE_LOCATION',payload:{lng:e.lngLat.lng,lat:e.lngLat.lat}})}
          />
        </ReactMapGL>
    </Box>
  )
}

export default AddLocation

This is AddRoom.js

import { Stepper, Container, Step, StepButton,StepLabel, StepConnector, Stack, Button, Box } from '@mui/material'
import React from 'react'
import { useState, useRef, useEffect } from 'react'
import AddLocation  from './addLocation/AddLocation'
import AddDetails from './addDetails/AddDetails'
import AddImages from './addImages/AddImages'
import { useValue } from '../../context/ContextProvider'

const AddRoom = () => {
    const{state:{images, details, location}}=useValue();
    const [activeStep,setActiveStep]=useState(0);
    const[steps,setStep]=useState([
    {label:'Location',completed:false},
    {label:'Details',completed:false},
    {label:'Images',completed:false}

    ])

    const handleNext=()=>{
        if(activeStep<steps.length-1){
            setActiveStep((activeStep)=>activeStep+1)
            setStep(steps.map((step,index)=>index===activeStep?{...step,completed:true}:step))
        }else{
            const stepIndex=findUnfinished();
            setActiveStep(stepIndex);
        }
    }

    const checkDisabled=()=>{
        if(activeStep<steps.length-1){
            
            return false
        }
        const index=findUnfinished();
        steps.findIndex(step=>step.completed===false);
        if(index===-1){
            return false
        }
    }
    const findUnfinished=()=>{
        return steps.findIndex(step=>!step.completed);
    }

    useEffect(() => {
        if (location.lng || location.lat) {
          if (!steps[0].completed) setComplete(0, true);
        } else {
          if (steps[0].completed) setComplete(0, false);
        }
      }, [location, steps]);
    
    useEffect(()=>{
        if(images.length){
            if(!steps[1].completed) setComplete(2,true)
        }else{
            if(steps[1].completed) setComplete(2,false)
        }
    },[images, steps])
 
    useEffect(()=>{
        if(details.title.length>4 && details.description.length>9){
            if(!steps[1].completed) setComplete(1,true)
        }else{
            if(steps[1].completed) setComplete(1,false)
        }
    },[details, steps])

     const setComplete=(index,status)=>{
        setStep((steps)=>{
            steps[index].completed=status
        return [...steps]});
        };
    
    return (
    <Container sx={{my:4}}>
        <Stepper
        alternativeLabel
        nonLinear
        activeStep={activeStep}
        sx={{mb:3}}>
            {steps.map((step,index) => (
                <Step key={step.label} completed={step.completed} >
                <StepLabel>{step.label}</StepLabel>
                <StepConnector></StepConnector>
                    <StepButton onClick={()=>setActiveStep(index)}></StepButton>
                </Step>
            ))
            }
            </Stepper>
            <Box >
                {{
                    0:<AddLocation/>,
                    1:<AddDetails/>,
                    2:<AddImages/>
                }[activeStep]}
            </Box>
            <Stack direction='row' sx={{pt:2,pb:7,justifyContent:'space-around'}}>
                <Button color="inherit" disabled={!activeStep} onClick={() => {
                    setActiveStep(activeStep => activeStep - 1);
                    setStep(steps.map((step, index) => index === activeStep - 1 ? {...step, completed: false} : step));
                }}>Back</Button>
                <Button onClick={handleNext} disabled={checkDisabled()}>Next</Button>
            </Stack>
    </Container>
  )
}

export default AddRoom

This is ContextProvider.js

import React from 'react'
import { createContext, useContext, useReducer } from 'react'
import reducer from './reducer'
import Profile from '../components/user/Profile'
const intialState = {
  currentUser: null,
  openLogin: false,
  loading: false,
  alert: {open:false,severity:'info',message:''},
  profile:{open:false, file:null, photoURL:''},
  images:[],
  details:{title:'',description:'',price:0},
  location:{lng:0,lat:0},
}
const Context = React.createContext(intialState)

export const useValue = () => {
    return useContext(Context)
}

const ContextProvider = ({children}) => {
    const [state, dispatch] = useReducer(reducer, intialState)
    return (
    <Context.Provider value={{state,dispatch}}>
      {children}
    </Context.Provider>
  )
}

export default ContextProvider

This is reducer.js

const reducer = (state, action) => {
    switch(action.type){
        
        case 'OPEN_LOGIN':
            return {
                ...state,
                openLogin: true
            }
        case 'CLOSE_LOGIN':
            return {
                ...state,
                openLogin: false
            }
            case 'START_LOADING':
            return {
                ...state,
                loading: true
            }
        case 'END_LOADING':
            return {
                ...state,
                loading: false
            }
        case 'UPDATE_USER':
            localStorage.setItem('currentUser', JSON.stringify(action.payload));
            return {
                ...state,
                currentUser: action.payload
            }
        case 'UPDATE_ALERT':
            return {
                ...state,
                alert: action.payload
            }
        case 'UPDATE_PROFILE':
                return {
                    ...state,
                    profile: action.payload
                }
        case 'UPDATE_IMAGES':
            return {
                ...state,
                images: [...state.images, action.payload]
            }   
        case 'DELETE_IMAGE':
            return {
                ...state,
               images: state.images.filter(image => image !== action.payload)
            }         
        case 'UPDATE_DETAILS':
            return {
                ...state,
                details: {...state.details, ...action.payload}
            }  
        case 'UPDATE_LOCATION':
            return {
                ...state,
                location: action.payload
            }
        default:
            throw new Error("No matched action!");
    }
}
export default reducer;

I tried using useEffect but not been successful.