useEffect error

import React, { createContext, useState, useEffect } from 'react';
import uuid from 'uuid/v1';

export const BookContext = createContext();

export const BookContextProvider = props => {

    const [books, setBooks] = useState([]);

    const addBook = async (title, author) => {
      await setBooks([...books, { title, author, id: uuid()}]);
        useEffect(() => {
            localStorage.setItem('books', JSON.stringify(books));
        }, [books]);
    };

    const removeBook = id => {
      let filteredBooks = books.filter(book => book.id !== id);
      setBooks([...filteredBooks]);
    };

    return (
        <BookContext.Provider value={{ books, addBook, removeBook }}>
            { props.children }
        </BookContext.Provider>
    );

};