I’m trying to use a default collection in firebase that a user can overwrite with their own values and save elsewhere.

I have a default collection from which the initial values will be drawn, and have these values displayed in a table, with an input field that the user will fill with their preferred values, which will then be placed in a new collection.
I’m displaying these values using data.map and am struggling to bring the values from every input field in to the new collection.

Here is the code so far:

export default function CheeseCostForm( ) {
  const {user} = useAuthContext()
  const colRef = collection(db,`users/${user.uid}/cheese`)
  const [ cheeseName ] = useState('')
  const [ cheeseCost, setCheeseCost] = useState('')
  const [ data, setData ] = useState('')
  const collectionRef = collection(db, '/default/cheeseCosts/cheeseCosts'); 
  const q = query(collectionRef, orderBy('listOrder', 'asc'));


      const cheeseInfo = colRef;
      const CheeseInfoData = {
        cheeseName,
        cheeseCost,
        uid: user.uid,
        dateLastChanged: serverTimestamp()
      };

  const updateCheese = async (e) => {
  e.preventDefault()
   await addDoc(cheeseInfo, CheeseInfoData);
  }

  onSnapshot(q, (snapshot) => 
    setData(snapshot.docs.map((doc) => ({ ...doc.data(),})))
  );

return (
. . . . . . . . .



          {data && data.map(costs =>(  
          <tr key={costs.id}>
            <td>{costs.cheeseName}</td>
            <td>{costs.cheeseCost}</td>
            <td>
                <input 
                type="text" 
                maxLength="3" 
                onChange={(e) => [
            setCheeseCost(e.target.value),
                    setCheeseName(costs.cheeseName)]}
                placeholder={costs.cheeseCost} />
            </td>
          </tr>
        ))}
        <button className="btn" 
                onClick={updateCheese}
                >Update Cheese Costs
        </button>

I’m also looking for a way to ignore the default collection once a user has saved their preferred values, and use their preferred values as placeholders in the input fields.

apologies if this isn’t very well explained. I’ll elaborate further if needed.

Thanks in advance.

default collection

New collection, only one document appears

The form with each document as a table row. Entering values in the fields only updates/creates one document in Firebase