Counter displaying warning sign even if data was fetched correctly

[GabrielMusatMestre]

Describe the bug

A Counter component is not displaying the value even if the underlying GraphQL query succeeded and returned actual data.

To reproduce Steps to reproduce the behavior:

Create a counter component that queries directly to a DataPool:

function App() {
  return (
    <AccessTokenProvider fetchToken={fetchToken}>
      <Counter
        style={{ width: 100, height: 100 }}
        query={{
          metric: {
            count: {
              dataPool: { id: import.meta.env.VITE_DATA_POOL_ID }
            }
          }
        }}
      />
    </AccessTokenProvider>
  )
}

In this case the underlying GraphQL requests returned:

{"data":{"counter":{"value":"12"}}}

But this how the React application looks like:

If I remove the query prop in the Counter component and I instead pass a static value, it works as expected.

Desktop (please complete the following information)

• OS: macOS
• Browser: Chrome
• UI Kit Version: 0.5.5

[GabrielMusatMestre]

If I instead use the useCounter hook, it works correctly:

function App() {
  const { data } = useCounter({
    metric: {
      count: {
        dataPool: { id: import.meta.env.VITE_DATA_POOL_ID }
      }
    }
  })

  return (
    <Counter
      value={data?.counter?.value ?? 'unknown'}
      style={{ width: 100, height: 100 }}
    />
  )
}

export default function ProvidedApp() {
  return (
    <QueryClientProvider client={new QueryClient()}>
      <AccessTokenProvider fetchToken={fetchToken}>
        <App />
      </AccessTokenProvider>
    </QueryClientProvider>
  )
}