Problems With Ternary Operator In ReactJS

I'm trying to use a ternary operator to show my loading state in reactJSm but i'dont understand why its always true, i'm using reactotron to debug my state and its working correctly "onload: loading true, after :loading false. But when i use the operator its always true. Someone could help me ?

i tried use the loading={loading ? 1 : 0} inside Container but nothing change...

<Container>
      <Content>
        <header>
          <p>Meus Meetups</p>
          <button type="button">Novo Meetup</button>
        </header>
        <ul>
          {loading ? (
            <AiOutlineLoading color="#eb3443" size={40} />
          ) : (
            meetups.map(meetup => (
              <MeetList key={meetup.id}>
                <Link to={`/details/${meetup.id}`}>
                  <strong>{meetup.title}</strong>
                  <p>
                    {format(parseISO(meetup.date), `dd 'de' MMMM 'às' HH'h'`, {
                      locale: pt,
                    })}
                  </p>
                </Link>
              </MeetList>
            ))
          )}
        </ul>
      </Content>
    </Container>

Operator looks fine. Are you sure that loading state has a vaild value? Try changing the loading to hardcoded false value to verify that operator is fine.