title: My custom hook when i use my const in another component is empty
body: <p>I create a hook to get my methods...</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;
  import { get } from &quot;../services/apiRequest&quot;
  import { filterSports } from &quot;../utils/filterSports&quot;
  
  interface SportsInter {
    id: number,
    name: string,
    spots: string,
    image: string,
    date: string,
    bairro: string,
    cep: string,
    cidade: string,
    estado: string,
    referencia: string,
    rua: string,
    usedSpots: number
  }
  
  export function useSportSelected() {
    const [responseSportCarrousel, setResponseSportCarrousel] = useState([])
    const [sportSelectName, setSelectName] = useState('')
    const [responseMapSport, setResponseMapSport] = useState&lt;SportsInter[]&gt;([])
  
    useEffect(() =&gt; {
      getSelectedSportsCarrousel()
    }, [])
  
    useEffect(() =&gt; {
      getSelectedSports()
    }, [sportSelectName])
  
    const getSelectedSportsCarrousel = async () =&gt; {
      await get('sports')
        .then(response =&gt; {
          setResponseSportCarrousel(response.data)
        })
        .catch((error: string) =&gt; {
          console.log(error)
        })
    } 
  
    const getSelectedSports = () =&gt; {
        get(`events/${filterSports(sportSelectName)}`)
        .then(response =&gt; {
          const array:SportsInter[] = Object.values(response.data)
          setResponseMapSport(array)
        })
        .catch((error: string) =&gt; {
          console.log(error)
        })
      }
  
    return {
      responseSportCarrousel, sportSelectName, setSelectName, responseMapSport
    }
  }
  </code></pre>
  <p>When i call that const <code>responseMapSport</code> in another component, it is empty</p>
  <pre><code>import { useEffect, useState } from 'react'
  import { AiOutlinePlusCircle } from 'react-icons/ai'
  import { Toast } from '../Toast/Toast'
  
  import photo from './../../../assets/img/ibra.png'
  import { ContainerModalEvent, ContainerSports, ContainerToast, LoaderContainer, SportsItem } from './style'
  import { Loader } from '../Loader/Loader'
  import Modal from 'react-modal'
  import { get } from '../../services/apiRequest'
  import { filterSports } from '../../utils/filterSports'
  import { useSportSelected } from '../../hooks/useSportSelected'
  
  interface SportsInter {
    id: number,
    name: string,
    spots: string,
    image: string,
    date: string,
    bairro: string,
    cep: string,
    cidade: string,
    estado: string,
    referencia: string,
    rua: string,
    usedSpots: number
  }
  
  export const Sports = () =&gt; {
  
    const [modalState, setModalState] = useState(false)
    const [modalData, setModalData] = useState&lt;SportsInter&gt;()
    const [showToast, setShowToast] = useState({ type: '', message: '' })
    const [showToastBoolean, setShowToastBoolean] = useState(false)
    // const [responseMapSport, setMapSportResponse] = useState&lt;SportsInter[]&gt;([])
  
    const {responseMapSport} = useSportSelected()
    console.log(responseMapSport)
  
    // const joinEvent = async (event_id: number) =&gt; {
    //   Api.post('events/join', {eventId: event_id}, config).then(response =&gt; {
    //     if(response.data === 'Você já está cadastrado nesse evento!') {
    //       setShowToastBoolean(true)
    //       setShowToast({ type: 'error', message: 'Você já está cadastrado nesse evento!'})
    //       setTimeout(() =&gt; {
    //         setShowToastBoolean(false)
    //         setShowToast({ type: '', message: ''})
    //       }, 2000)
    //     } else {
    //       setShowToastBoolean(true)
    //       setShowToast({ type: 'success', message: 'Sua participação foi gravada'})
    //       setTimeout(() =&gt; {
    //         window.location.reload()
    //       }, 2000)
    //     }
    //     console.log(response.data)
    //   }).catch ((error: string) =&gt; {
    //     setShowToastBoolean(true)
    //     setShowToast({ type: 'error', message: error})
    //     console.log(error)
    //   })
    // }
  
    if(responseMapSport === []) {
      return (
      &lt;LoaderContainer&gt;
      &lt;Loader loader={true} /&gt;
      &lt;/LoaderContainer&gt;
      )
    } else {
      return (
        &lt;&gt;
          &lt;LoaderContainer&gt;
          &lt;Loader loader={false} /&gt;
          &lt;/LoaderContainer&gt;
          &lt;ContainerSports&gt; 
            {responseMapSport.map((sport: SportsInter) =&gt; {
              return (
                &lt;&gt;
                &lt;SportsItem key={sport.id}&gt;
                  &lt;img src={sport.image? sport.image : photo} alt={sport.name}/&gt;
                  &lt;p id=&quot;main_title&quot;&gt;{sport.name}&lt;/p&gt;
                    &lt;div id=&quot;ContainerInfo&quot;&gt;
                      &lt;div id=&quot;infos&quot;&gt;
                        &lt;div id=&quot;details&quot;&gt;
                          &lt;p&gt;DATA&lt;/p&gt;
                          &lt;p&gt;{sport.date}&lt;/p&gt;
                        &lt;/div&gt;
                      &lt;div id=&quot;details&quot;&gt;
                          &lt;p&gt;DISTÂNCIA&lt;/p&gt;
                          &lt;p&gt;4 Km&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id=&quot;details&quot;&gt;
                        &lt;p&gt;VAGAS&lt;/p&gt;
                          &lt;p&gt;{sport.usedSpots} / {sport.spots}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;AiOutlinePlusCircle id=&quot;plus_icon&quot; onClick={() =&gt; {setModalData(sport); setModalState(true)}}/&gt;                   
                    &lt;/div&gt;
                &lt;/SportsItem&gt;
                      &lt;Modal
                        isOpen={modalState}
                        onRequestClose={() =&gt; setModalState(false)}
                        style={{
                           overlay: {
                           backgroundColor: 'rgba(0,0,0,0.2)',
                           width: '100%'
                           },
                          content: {
                          backgroundColor: '#0D242C',
                          border: '2px solid #2ABF8B',
                          borderRadius: '15px'          
                          }
                          }}
                          &gt;
                          &lt;ContainerToast&gt;
                          &lt;Toast onOpen={showToastBoolean} showToast={showToast} /&gt;
                          &lt;/ContainerToast&gt;
                          &lt;ContainerModalEvent&gt;
                            &lt;div id=&quot;image&quot;&gt;
                            &lt;img src={modalData?.image? modalData.image : photo} alt={modalData?.name}/&gt;
                            &lt;/div&gt;
                            &lt;div id=&quot;infos&quot;&gt;
                            &lt;h1&gt;Nome do evento&lt;/h1&gt;
                            &lt;p&gt;{modalData?.name}&lt;/p&gt;
                            &lt;h1&gt;Vagas&lt;/h1&gt;
                            &lt;p&gt;{modalData?.usedSpots} / {modalData?.spots}&lt;/p&gt;
                            &lt;h1&gt;Data&lt;/h1&gt;
                            &lt;p&gt;{modalData?.date}&lt;/p&gt;
                            &lt;h1&gt;Endereço&lt;/h1&gt;
                            &lt;p&gt;{modalData?.rua} - {modalData?.bairro} - {modalData?.cidade} - {modalData?.estado} - {modalData?.cep} - {modalData?.referencia}&lt;/p&gt;
                            &lt;button onClick={() =&gt; joinEvent(modalData?.id || 0)}&gt;QUERO PARTICIPAR!!!&lt;/button&gt;
                            &lt;/div&gt;
                          &lt;/ContainerModalEvent&gt;
                          &lt;/Modal&gt;
                        &lt;/&gt;
              )
            })}
          &lt;/ContainerSports&gt;
        &lt;/&gt;
      )
    }    
  } 
  </code></pre>
  <p>Here is the result
  <a href="https://i.stack.imgur.com/1DOLX.png" rel="nofollow noreferrer">enter image description here</a></p>