I am trying to pass some data to a variable in react + typescript here is what I am trying

    const data = useMemo<DummyDataType[]>(
    () => [
      {
        userId: "Foo",
        flowAmount: "Bar",
      },

    ],
    []
  );

 const arr: { userId: string; flowAmount: string }[] = [];


 var leadsRef = db.ref('users');
leadsRef.on('value', function(snapshot) {

  snapshot.forEach(item => { 
    arr.push({userId: 'test', flowAmount: 'test'})
  })

}); 



  const Table = useTable<DummyDataType>({
    columns: columns,
    data: data,
    isDataLoading: false,
    isDataLoadingError: false,
    isRowSelectable: false,
    isMultiRowSelectable: false,
  });
  return (
    <Box p="4" color="white" bg="rgb(35, 36, 41)">
        <Button colorScheme='yellow' > Save changes</Button>
      {Table}
    </Box>
  );

so I want to push the arr to the data variable (the arr is just some dummy thing for me to test, i need the arr to reach the data var) now the problem is that the table loads before the firebase loads, and it does not render the arr. I think i need to change the data or the arr to some useState but I am not sure how that would work out If I use useState

type DummyDataType = {
  userId: ReactNode;
  flowAmount: ReactNode;

};
    const data = useState<DummyDataType[]>(
    () => [
      {
        userId: "Foo",
        flowAmount: "Bar",
      },


    ],
    []
  );

I get the next error