Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')

Пытаюсь подключить firebase firestore к своему приложению на React

документ firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
    apiKey: "AIzaSy...........",
    authDomain: "todo-list-769ff.firebaseapp.com",
    projectId: "todo-list-769ff",
    storageBucket: "todo-list-769ff.appspot.com",
    messagingSenderId: "57.......",
    appId: "1:57.......:web:b90...........",
  };

  firebase.initializeApp(firebaseConfig);

  export default firebase;

документ app.js

import React, { useState } from 'react';
import firebase from './firebase';

function App(){
  const [Tasks, setTasks]= useState([]);
  const [loading, setLoading]= useState(false);

  const ref = firebase.firestore().collection("tasks");
  console.log(ref);

  if(loading){
    return <h1>Loading...</h1>;
  }

  return(
    <div>
      <h1>Tasks</h1>
      {Tasks.map((task) =>(
        <div key={task.id}>
          <h2>{task.title}</h2>
        </div>
      ))}
    </div>
  );
}

документ index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

при запуске выдает ошибку: