React Context: Component consuming and displaying information

Question

I am building a App with two components that are in the same level, not one parent and the other child. I need to share information (state) from one component to another. So, am using for first time React Context.

I have a component that list places and I made it the Provider:

const PlacesList=({places})=>{
     const [selectedPlace, setSelectedPlace] = useState({});

     const renderedList = places.map(/*Business logic*/)
     
     return (
         <div>
            <div className="ui list">{renderedList}</div>
            <SelectedPlaceContext.Provider value={selectedPlace}>
                <CityDetail />
            </SelectedPlaceContext.Provider>
         </div
      )
}

I have another Component where I want to display the information coming from a API call with selectedPlace state coming from PlacesList component. So, this component-CityDetail- will consume the information needed (selectePlace):

const CityDetail=()=>{
        const onCityWeather=(selectedPlace)=>{
                API_call.then((response)=>{
                        console.log(response) /*Retrieve correctly all information from API         
                    {                                       
                     config:{...},                                                                                                                
                     data: {currently:{                                                             
                                 time:102348904,                                                             
                                 summary:'Cloudy',...}                                                                     
                               }                                                                                                   
                    }*/
                        return response /*Don't display the information in the screen*/ 
                     })
            }
         return (
              <div>
                   <SelectedPlaceContext.Consumer>
                      {onCityWeather}
                   </SelectedPlaceContext.Consumer>
              </div>
           )
     }

The information coming from the API call (within onCityWeather function) is succesfully console.log, but I don't know how to display it in the screen as returning the response of the API call within the onCityWeather function don't display anything in the screen.