Estoy tratando de pasar algunos datos a una variable en react + mecanografiado aquí es lo que estoy intentando

 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> );

así que quiero enviar el arr a la variable de datos (el arr es solo una cosa ficticia para probar, necesito el arr para llegar a la variable de datos) ahora el problema es que la tabla se carga antes de que se cargue Firebase, y lo hace no renderizar el arr. Creo que necesito cambiar los datos o el arr a algún estado de uso, pero no estoy seguro de cómo funcionaría si uso estado de uso

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

me sale el siguiente error