I am trying to create a table looking for data from firebase, however the table is always giving error.
I put the whole function in a script to validate if any error in the component call, but always lists the same error: TypeError: **custos**.map is not a function
Does anyone know what can it be?
I already tested it and the variable **custos** can return the object, but I can't use it in the map function

```
function MeusCustos(){

    const [custos, setCustos] = useState([]);
    const [pesquisa, setPesquisa] = useState('');
    const usuarioEmail = useSelector(state => state.usuarioEmail);
    let listaCustos = [];

    useEffect( () => {
                firebase.firestore().collection('custos').get().then(async(resultado) => {
                    resultado.docs.forEach(doc => {
                            listaCustos.push({
                                id: doc.id,
                                ...doc.data()
                            });
                        }); 
                    setCustos(JSON.stringify(listaCustos));
                }); 
    }, []);  

    return(
    <>
    <Navbar/>

    <div className="row p-3">
    <div className="container">
            <h1>Simple Inventory Table</h1>
            <table className="table table-striped">
                <thead>
                <tr>
                    <th scope="col">Titulo</th>
                    <th scope="col">Descrição</th>
                    <th scope="col">Quantidade</th>
                    <th scope="col">Valor</th>
                    <th scope="col">Data</th>
                    <th scope="col">Comprovante</th>
                    <th scope="col">UsuarioEmail</th>
                    <th scope="col">Visualizações</th>
                    <th scope="col">Publico</th>
                    <th scope="col">Criação</th>
                </tr>
                </thead>
                <tbody>
                {custos.map( item =>
                            <tr >
                                <th scope ="row"></th>
                                <td>{item.titulo}</td>
                                <td>{item.descricao}</td>
                                <td>{item.quantidade}</td>
                                <td>{item.valor}</td>
                                <td>{item.data}</td>
                                <td>{item.comprovante}</td>
                                <td>{item.usuarioemail}</td>
                                <td>{item.visualizacoes}</td>
                                <td>{item.publico}</td>
                                <td>{item.criacao}</td>
                            </tr> 
                     )}
                </tbody>
            </table>
        </div>

    </div>
    </>)
}

export default MeusCustos;

```