Reactjs – Rendering <Context> directly is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?

I am using react leaflet in my react app.
I used context api to build my project.
But when i tried using the leaflet using code :

  <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>

I get errors like :

1.A context consumer was rendered with multiple children, or a child that isn’t a function. A context consumer expects a single child that is a function. If you did pass a function, make sure there is no trailing or leading whitespace around it

2.Rendering directly is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?

3.render2 is not a function

what to do ?

Below is my app structure :

<CitiesProvider>
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Homepage />} />
      <Route path="product" element={<Product />} />
      <Route path="pricing" element={<Pricing />} />
      <Route path="login" element={<Login />} />
      <Route path="*" element={<NotFound />} />
      <Route path="app" element={<AppLayout />}>
        <Route index element={<Navigate replace to="cities" />} />
        <Route path="cities" element={<CityList />} />
        <Route path="countries" element={<CountryList />} />
        <Route path="cities/:id" element={<City />} />
        <Route path="form" element={<Form />} />
      </Route>
    </Routes>
  </BrowserRouter>
</CitiesProvider>