How do I use multiple fields in the Firestore?

I'am working on a script that enters data into a firebase store which represents a new product.

I want to add several fields of the same configuration as in the picture, but I can't find a way.

When I register new data, it will be overwritten.

I'm followed the the Firebase documentation, but I can't find an example that suits my needs.

import React, { useState } from "react";
import { collection, doc, setDoc } from "firebase/firestore";
import { db } from "../service/firebaseConfig";

export default function NewProduct() {
  const [name, setName] = useState("");
  const [price, setPrice] = useState("");
  const [kind, setKind] = useState("");
  const [size, setSize] = useState("");
  const [description, setDescription] = useState("");
  const handleName = (e) => setName(e.target.value);
  const handlePrice = (e) => setPrice(e.target.value);
  const handleKind = (e) => setKind(e.target.value);
  const handleSize = (e) => setSize(e.target.value);
  const handleDescription = (e) => setDescription(e.target.value);
  const board = collection(db, "board");
  const setBoard = async () =>
    await setDoc(doc(board, "items"), {
      name: name,
      price: price,
      category: kind,
      size: {
        default: {
          small: size.includes("s") === true && "s",
          medium: size.includes("m") === true && "m",
          large: size.includes("l") === true && "l",
          extralarge: size.includes("xl") === true && "xl",
          twoextralarge: size.includes("xxl") === true && "xxl",
        },
      },
      description: description,
    });

  const handleSubmit = (e) => {
    e.preventDefault();
    setBoard();
    console.log(board);
    setName("");
    setPrice("");
    setKind("");
    setSize("");
    setDescription("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <h2>새로운 제품 등록</h2>
      <input type="text" placeholder="제품명" onChange={handleName} value={name} />
      <input type="text" placeholder="가격" onChange={handlePrice} value={price} />
      <input type="text" placeholder="카테고리" onChange={handleKind} value={kind} />
      <input type="text" placeholder="사이즈" onChange={handleSize} value={size} />
      <input type="text" placeholder="제품설명" onChange={handleDescription} value={description} />
      <button>제품 등록하기</button>
    </form>
  );
}

the setDoc function creates a new docuemnt, if the document already exists it will overwrite it (that's what you mean by overlaps)

to add the data and avoid overwriting simply add the { merge: true } option:

 await setDoc(doc(board, "items"), yourObject, { merge: true });