Using Custom Claims in React Firebase Hooks to access specific database Ref - reactjs

Question

I'm pretty new to React Hooks and I'm trying to figure out how to use react-firebase-hooks with custom claims.
My firebase Realtime Database is structured like so :
groups
--- key1
------- clients
------- info
--- key2
------- clients
------- info
Each user has a custom claim named "group" carrying the group Key.
I have this code so far but it's throwing me a:
Uncaught TypeError: Cannot read property 'hasCancelCallback' of undefined
at ChildEventRegistration.createCancelEvent"
function ClientList() {
const [firebaseUser, loadingFirebaseUser] = useAuthState(auth);
const [userGroup, setUserGroup] = useState();
useEffect(() => {
const fetchClaims = async () => {
const {
claims: { group },
} = await firebaseUser.getIdTokenResult();
setUserGroup(group);
};
if (firebaseUser) fetchClaims();
}, [firebase.database(), firebaseUser]);
const [snapshots, loading, error] = useList(
firebase.database().ref(`groups/${userGroup}/clients`)
);
return (
<div>
<h2>List of Clients</h2>
{userGroup && <p>{userGroup}</p>}
{error && <strong>Error: {error}</strong>}
{loading && <span>List: Loading...</span>}
{!loading && snapshots && (
<ul>
{snapshots.map((v) => (
<li key={v.key}>
{v.key}}
</li>
))}
</ul>
)}
</div>
);
}
I might be missing something very obvious here.
Here's a full stack trace of the error :
overrideMethod # react_devtools_backend.js:2557
printWarnings # vendors~main.chunk.js:36207
handleWarnings # vendors~main.chunk.js:36212
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # vendors~main.chunk.js:36277
vendors~main.chunk.js:28144 Uncaught TypeError: Cannot read property 'hasCancelCallback' of undefined
at ChildEventRegistration.createCancelEvent (vendors~main.chunk.js:28144)
at vendors~main.chunk.js:23797
at Array.forEach (<anonymous>)
at viewRemoveEventRegistration (vendors~main.chunk.js:23796)
at syncPointRemoveEventRegistration (vendors~main.chunk.js:24047)
at syncTreeRemoveEventRegistration (vendors~main.chunk.js:24417)
at onComplete (vendors~main.chunk.js:24743)
at Object.onComplete (vendors~main.chunk.js:25874)
at vendors~main.chunk.js:16786
at PersistentConnection.onDataMessage_ (vendors~main.chunk.js:17069)
at Connection.onDataMessage_ (vendors~main.chunk.js:15624)
at Connection.onPrimaryMessageReceived_ (vendors~main.chunk.js:15617)
at WebSocketConnection.onMessage (vendors~main.chunk.js:15497)
at WebSocketConnection.appendFrame_ (vendors~main.chunk.js:15050)
at WebSocketConnection.handleIncomingFrame (vendors~main.chunk.js:15108)
at WebSocket.mySock.onmessage (vendors~main.chunk.js:14984)
ChildEventRegistration.createCancelEvent # vendors~main.chunk.js:28144
(anonymous) # vendors~main.chunk.js:23797
viewRemoveEventRegistration # vendors~main.chunk.js:23796
syncPointRemoveEventRegistration # vendors~main.chunk.js:24047
syncTreeRemoveEventRegistration # vendors~main.chunk.js:24417
onComplete # vendors~main.chunk.js:24743
(anonymous) # vendors~main.chunk.js:25874
(anonymous) # vendors~main.chunk.js:16786
PersistentConnection.onDataMessage_ # vendors~main.chunk.js:17069
Connection.onDataMessage_ # vendors~main.chunk.js:15624
Connection.onPrimaryMessageReceived_ # vendors~main.chunk.js:15617
(anonymous) # vendors~main.chunk.js:15497
WebSocketConnection.appendFrame_ # vendors~main.chunk.js:15050
WebSocketConnection.handleIncomingFrame # vendors~main.chunk.js:15108
mySock.onmessage # vendors~main.chunk.js:14984