array.list.concat() is removing two elements in json

I am trying to store two new elements into a json object which is called shirt, it is created by filtering from my database like below:

  let shirts = products.filter((product) => product.name === shirtName);

I then use states and create colors and size and create two elements for the two in the json object shirts as below:

    shirts.size = size;
    shirts.color = color;

    const newList = in_cart.list.concat(shirts);

but if i console.log(shirts) i get this response:

and if i console.log(newList) after using concat i get:

I then set a state equal to newList like this

set_in_cart({
      list: newList,
      totalcost: cost,
    });

and send it up to a parent element, but i need to determine the color and size of each item the user selects so this is why i need to get this to be stored on each specific object, thank you in advance!

Edit:

ProductPage.jsx:

const ProductPageBody = ({ products, in_cart, set_in_cart }) => {
  
  //Keeps track of color user selects
  const [color, setColor] = useState("none");
  //Keeps track of size user selects
  const [size, setSize] = useState("Small");
  
  //Filters out the product that the user selected
  let { shirtName } = useParams();
  let shirts = products.filter((product) => product.name === shirtName);
  //Updates state size of shirt being selected
  const updateSize = () => {
    let select = document.getElementById("sizeSelect");
    let text = select.options[select.selectedIndex].text;
    setSize(text);
  };

  //Updates state color of shirt being selected
  const updateColor = (userColor) => {
    setColor(userColor);

  };

  //Occurs when ADD TO CART is clicked
  const updateInCart = async (e) => {
    e.preventDefault();
    const body = {color, shirts}
    const headers = {
      "Content-Type": "application/json"
    }

    // return fetch('http://localhost:3000/color', {
    //   method: "POST",
    //   headers: headers,
    //   body: JSON.stringify(body)
    // }).then(response => {
    //   console.log("Success")
    // })
    // .catch(err = console.log(err));
    shirts.size = size;
    shirts.color = color;
    console.log(shirts);

    const newList = in_cart.list.concat(shirts);
    console.log(newList);


    const cost = newList.reduce((sum, shirt) => sum + shirt.price, 0);
    set_in_cart({
      list: newList,
      totalcost: cost,
    });
  };

  //Stores in cart items
  useEffect(() => {
    localStorage.setItem("inCartItems", JSON.stringify(in_cart));
  }, [in_cart]);

Routes.jsx(Parent):

const [products, setProducts] = useState([]);
  const [in_cart, set_in_cart] = useState({
    list: [],
    totalCost: 0,
  });
  console.log(in_cart);

  const getProducts = async () => {
    try {
      const response = await fetch("http://localhost:5000/products/");
      const jsonData = await response.json();

      setProducts(jsonData);
    } catch (err) {
      console.error(err.message);
    }
    if (localStorage.getItem("inCartItems")) {
      set_in_cart(JSON.parse(localStorage.getItem("inCartItems")));
    }
  };
  useEffect(() => {
    getProducts();
  }, []);

  return (
    <Router history={history}>
      <Switch>
        <Route
          exact
          path="/"
          render={(props) => (
            <HomePage
              products={products}
              in_cart={in_cart}
              set_in_cart={set_in_cart}
            />
          )}
        />
        <Route
          path="/ProductPage/:shirtName"
          render={(props) => (
            <ProductPage
              products={products}
              in_cart={in_cart}
              set_in_cart={set_in_cart}
            />
          )}
        />

Answer

By doing shirts.size = size; and shirts.color = color;, you are adding these properties to the shirts array itself, not the objects inside it. To add these properties to each object inside the shirts array, use this

shirts.forEach((shirt)=>{ shirt.color= color ; shirt.size=size;})