How to use the reactfire.useDatabaseList function in reactfire

function useProjectsList() {
  // Get current user (loading handled by Suspense in ProjectsList)
  const auth = useUser()
  const firebase = useFirebaseApp()

  // Create a ref for projects owned by the current user
  const projectsRef = firebase
    .database()
    .ref('projects')
    .orderByChild('createdBy')
    .equalTo(auth.uid)

  // Query for projects (loading handled by Suspense in ProjectsList)
  const projects = useDatabaseList(projectsRef)

  // New dialog
  const [newDialogOpen, changeDialogState] = useState(false)
  const toggleDialog = () => changeDialogState(!newDialogOpen)

  function addProject(newInstance) {
    return firebase
      .database()
      .ref('projects')
      .push({
        ...newInstance,
        createdBy: auth.uid,
        createdAt: firebase.database.ServerValue.TIMESTAMP
      })
      .then(() => {
        toggleDialog()

const List = props => {
  const database = useDatabase();
  const ref = database().ref('animals');
  const changes = useDatabaseList(ref);
  const addNewAnimal = commonName => {
    const newAnimalRef = ref.push();
    return newAnimalRef.set({
      commonName
    });
  };

  const removeAnimal = id => ref.child(id).remove();

  return (
    <>
      
      <ul>
        {changes.map(({ snapshot }) =&gt; (
          <li>
            {snapshot.val().commonName}{' '}</li></ul>