I see the following error for the below code:

react-indexed-db-hook.js?v=1ef088ed:2194 Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'
    at n2.initDB (react-indexed-db-hook.js?v=1ef088ed:2194:18)
    at main.jsx:10:1
n2.initDB @ react-indexed-db-hook.js?v=1ef088ed:2194
(anonymous) @ main.jsx:10
Show 1 more frame
Show lessUnderstand this errorAI
content.js:7 Content script loaded

current code (attached):

// src/App.js
import React, { useState, useEffect } from 'react';
import { initDB, useIndexedDB } from 'react-indexed-db-hook';
import { DBConfig } from './config/db-config';

// Initialize IndexedDB
initDB(DBConfig);

function App() {
  const { add, update, getAll, deleteRecord } = useIndexedDB('customers');
  const [customers, setCustomers] = useState([]);
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [input, setInput] = useState('');
  const [newCustomer, setNewCustomer] = useState('');
  const [editingCustomer, setEditingCustomer] = useState(null);
  const [editName, setEditName] = useState('');

  useEffect(() => {
    loadCustomers();
  }, []);

  const loadCustomers = async () => {
    try {
      const allCustomers = await getAll();
      setCustomers(allCustomers);
      if (allCustomers.length > 0 && !selectedCustomer) {
        setSelectedCustomer(allCustomers[0]);
      }
    } catch (error) {
      console.error('Error loading customers:', error);
    }
  };

  const addCustomer = async () => {
    if (newCustomer.trim()) {
      try {
        await add({ name: newCustomer, todos: [] });
        await loadCustomers();
        setNewCustomer('');
      } catch (error) {
        console.error('Error adding customer:', error);
      }
    }
  };

  const startEditingCustomer = (customer) => {
    setEditingCustomer(customer);
    setEditName(customer.name);
  };

  const saveCustomerEdit = async () => {
    if (editName.trim() && editingCustomer) {
      try {
        const updatedCustomer = { ...editingCustomer, name: editName };
        await update(updatedCustomer);
        await loadCustomers();
        if (selectedCustomer && selectedCustomer.name === editingCustomer.name) {
          setSelectedCustomer(updatedCustomer);
        }
        setEditingCustomer(null);
        setEditName('');
      } catch (error) {
        console.error('Error updating customer:', error);
      }
    }
  };

  const toggleComplete = async (index) => {
    if (selectedCustomer) {
      try {
        const updatedCustomer = {
          ...selectedCustomer,
          todos: selectedCustomer.todos.map((todo, i) =>
            i === index ? { ...todo, completed: !todo.completed } : todo
          )
        };
        await update(updatedCustomer);
        await loadCustomers();
        setSelectedCustomer(updatedCustomer);
      } catch (error) {
        console.error('Error toggling todo:', error);
      }
    }
  };

  const addTodo = async () => {
    if (input.trim() && selectedCustomer) {
      try {
        const updatedCustomer = {
          ...selectedCustomer,
          todos: [...selectedCustomer.todos, { text: input, completed: false }]
        };
        await update(updatedCustomer);
        await loadCustomers();
        setSelectedCustomer(updatedCustomer);
        setInput('');
      } catch (error) {
        console.error('Error adding todo:', error);
      }
    }
  };

  const deleteTodo = async (index) => {
    if (window.confirm('Are you sure you want to delete this todo item?')) {
      if (selectedCustomer) {
        try {
          const updatedCustomer = {
            ...selectedCustomer,
            todos: selectedCustomer.todos.filter((_, i) => i !== index)
          };
          await update(updatedCustomer);
          await loadCustomers();
          setSelectedCustomer(updatedCustomer);
        } catch (error) {
          console.error('Error deleting todo:', error);
        }
      }
    }
  };

  const deleteCustomer = async (customerName) => {
    if (window.confirm('Are you sure you want to delete this customer?')) {
      try {
        await deleteRecord(customerName);
        const updatedCustomers = customers.filter(c => c.name !== customerName);
        setCustomers(updatedCustomers);
        if (selectedCustomer && selectedCustomer.name === customerName) {
          setSelectedCustomer(updatedCustomers.length > 0 ? updatedCustomers[0] : null);
        }
      } catch (error) {
        console.error('Error deleting customer:', error);
      }
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
        <h1 className="text-2xl font-bold mb-4">Todo App</h1>
        <div className="mb-4">
          <label className="block text-gray-700">Add Customer:</label>
          <div className="flex mb-2">
            <input
              type="text"
              className="flex-grow p-2 border border-gray-300 rounded-l-lg"
              value={newCustomer}
              onChange={(e) => setNewCustomer(e.target.value)}
              placeholder="Enter customer name"
            />
            <button
              className="bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600"
              onClick={addCustomer}
            >
              Add
            </button>
          </div>
          {customers.length > 0 && (
            <>
              <label className="block text-gray-700">Select Customer:</label>
              <select
                className="w-full p-2 border border-gray-300 rounded-lg"
                value={selectedCustomer ? selectedCustomer.name : ''}
                onChange={(e) => setSelectedCustomer(customers.find(customer => customer.name === e.target.value))}
              >
                {customers.map(customer => (
                  <option key={customer.name} value={customer.name}>
                    {customer.name}
                  </option>
                ))}
              </select>
            </>
          )}
        </div>
        {selectedCustomer && (
          <div>
            <div className="flex mb-4">
              <input
                type="text"
                className="flex-grow p-2 border border-gray-300 rounded-l-lg"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Add a new todo"
              />
              <button
                className="bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600"
                onClick={addTodo}
              >
                Add
              </button>
            </div>
            <ul>
              {selectedCustomer.todos.map((todo, index) => (
                <li
                  key={`${selectedCustomer.name}-${index}-${todo.text}`}
                  className="flex items-center justify-between p-2 border-b border-gray-200"
                >
                  <span
                    className={`flex-grow ${todo.completed ? 'line-through text-gray-500' : ''}`}
                  >
                    {todo.text}
                  </span>
                  <div className="flex items-center">
                    <button
                      className="text-green-500 mr-2 hover:text-green-600"
                      onClick={() => toggleComplete(index)}
                    >
                      Complete
                    </button>
                    <button
                      className="text-red-500 hover:text-red-600"
                      onClick={() => deleteTodo(index)}
                    >
                      Delete
                    </button>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        )}
        <div className="mt-4">
          <h2 className="text-xl font-bold mb-2">Customers</h2>
          <ul>
            {customers.map(customer => (
              <li
                key={customer.name}
                className="flex items-center justify-between p-2 border-b border-gray-200"
              >
                {editingCustomer && editingCustomer.name === customer.name ? (
                  <div className="flex items-center flex-grow mr-2">
                    <input
                      type="text"
                      className="flex-grow p-1 border border-gray-300 rounded"
                      value={editName}
                      onChange={(e) => setEditName(e.target.value)}
                    />
                    <button
                      className="text-green-500 ml-2 hover:text-green-600"
                      onClick={saveCustomerEdit}
                    >
                      Save
                    </button>
                  </div>
                ) : (
                  <>
                    <span>{customer.name}</span>
                    <div>
                      <button
                        className="text-blue-500 mr-2 hover:text-blue-600"
                        onClick={() => startEditingCustomer(customer)}
                      >
                        Edit
                      </button>
                      <button
                        className="text-red-500 hover:text-red-600"
                        onClick={() => deleteCustomer(customer.name)}
                      >
                        Delete
                      </button>
                    </div>
                  </>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

export default App;