TypeError: undefined is not an object (evaluating 'lists.map')

Я пытаюсь сделать тудушку используя React и Firebase. В Firebase у меня есть todos(задачи) и lists(списки в которых должны объединятся некоторые задачи по тематике). Я плохо знаю React и пытаюсь повторить видео CodeDojo, но у меня появляется вот такая ошибка:

TypeError: undefined is not an object (evaluating 'lists.map')

App.jsx

import React, { useState, useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';

import { get } from './api';
import DBContext from './context/db';

import AppDrawer from "./components/AppDrawer";
import AppContent from "./components/AppContent";
import TodoList from "./components/TodoList";

import "./App.scss"

export default function App() {
    const [lists, setLists ] = useState([]);
    const [todos, setTodos ] = useState([]);

    useEffect(() => {
        get('lists').then(setLists);
    }, []);


    return (
        <DBContext.Provider value={{lists, todos, get }}>
            <div className="app">
                <AppDrawer
                    lists={lists}
                />


                <AppContent>
                    <Switch>
                        <Route path="/:listId" component={TodoList} />
                    </Switch>
                </AppContent>
            </div>
        </DBContext.Provider>
    );
}

AppDrawer.js ошибка здесь во втором List

import React from 'react';
import { NavLink } from 'react-router-dom';

import {
    Drawer, DrawerHeader, DrawerContent,Icon,
    List, ListItem, ListItemGraphic, ListItemText, ListDivider,
    ListGroup
} from 'mdc-react';

export default function AppDrawer({ lists }) {

    return (
        <Drawer
            id="app-drawer"
        >
            <DrawerHeader
                title="React Todo"
            />

            <DrawerContent>
                <ListGroup>
                    <List>
                        {[
                            { title: 'Moje konto', icon: 'person', to: '/' },
                            { title: 'Zadania', icon: 'assignment', to: '/tasks' },
                            { title: 'Ważne', icon: 'grade', to: '/important'},
                            { title: 'Nadchodzące', icon: 'alarm', to: '/planned'},
                            { title: 'Wykonane', icon: 'done', to: '/done'},
                        ].map(item =>
                            <ListItem
                                key={item.icon}
                                component={NavLink}
                                to={item.to}
                            >
                                <ListItemGraphic>
                                    <Icon>{item.icon}</Icon>
                                </ListItemGraphic>

                                <ListItemText>
                                    {item.title}
                                </ListItemText>
                            </ListItem>
                        )}
                    </List>

                    <ListDivider element="hr" />

                    <List>
                        {lists.map(item =>
                            <ListItem
                                key={item.key}
                                component={NavLink}
                                to={item.id}
                            >
                                <ListItemGraphic>
                                    <Icon>list</Icon>
                                </ListItemGraphic>

                                <ListItemText>
                                    {item.title}
                                </ListItemText>

                            </ListItem>
                        )}
                    </List>
                </ListGroup>
            </DrawerContent>
        </Drawer>
    );
}

У меня есть еще такая api но не думаю что проблема в нем.

import { db } from "./firebase";

export function get(collection) {
   return db.collection(collection)
        .get()
        .then(snapshot => {
            const items = snapshot.docs.map(doc => ({
                id: doc.id,
                ...doc.data()
            }));

            return items;
        })
        .catch((error) => {
            console.log("Error getting documents: ", error);
        });
}