title: useEffect "is called in function "onEachCountry" that is neither a React function component nor a custom React Hook function
body: <p>I'm trying to put the coronavirus cases by country in the popup line 42 on a planisphere map with geoJSON and the following api:
  <a href="https://corona.lmao.ninja/v3/covid-19/countries" rel="nofollow noreferrer">https://corona.lmao.ninja/v3/covid-19/countries</a>
  however that tells me the error &quot; Line 23:3:   React Hook &quot;useEffect&quot; is called in function &quot;onEachCountry&quot; that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter  react-hook&quot;I call my api with axios and I use latest to index the data</p>
  <p>do you have a solution ?</p>
  <p>here my code</p>
  <pre><code>import React, { useEffect, useState} from 'react';
  import axios from &quot;axios&quot;;
  import { Map, GeoJSON } from &quot;react-leaflet&quot;;
  import &quot;leaflet/dist/leaflet.css&quot;;
  import &quot;./CovidMap.css&quot;;
  
  
  
  const CovidMap = ({ countries }) =&gt; {
      const mapStyle = {
          fillColor: &quot;white&quot;,
          weight: 1,
          color: &quot;black&quot;,
          fillOpacity: 1,
      };
  
      const onEachCountry = (country, layer)=&gt;{
  
   const [latest, setLatest] = useState([]);
   
  
    // connexion api 
    useEffect(() =&gt; {
      axios
        .all([
             //donnees par pays 
          axios.get(&quot;https://corona.lmao.ninja/v3/covid-19/countries&quot;),
       
        ])
        .then(responseArr =&gt; {
          setLatest(responseArr[0].data);
        })
        .catch(err =&gt; {
          console.log(err);
        });
    }, []);
  
  
          layer.options.fillColor = country.properties.color;
          const name = country.properties.ADMIN; //parametrage popup pays 
          const cases = country.properties.cases;
              layer.bindPopup(`${name} ${latest.cases}`);
      }
  
      console.log(countries);
      return (
          &lt;Map style={{ height: &quot;90vh&quot; }} zoom={2} center={[20, 100]}&gt;
              &lt;GeoJSON
                  style={mapStyle}
                  data={countries}
                  onEachFeature={onEachCountry} /&gt;
          &lt;/Map&gt;
      );
  };
  
  export default CovidMap;
  </code></pre>