How can I save in Firestore when a value is from a conditional element? More explanation below

So I have this category of select.

1. If the user chose, shirt sizes, it will show a text field to enter the number of the size and a selection as well to enter whether it is S,M,L, and so on.
2. If the user chose CM, it will only reveal a size an InputProp at the end of a CM and also goes the same to ML

I can already save it in the firestore well if the user will just choose number 1.The problem here is that, if I’ll choose number two the sizes CM and ML would not be submitted since I am not sure how to do this as saving size1 will have a value of undefined.

Select a category

const [category, setCategory] = useState(); //select
const [size1, setSize1] = useState(); //select

  //select
  const handleChange = (event) => {
    setCategory(event.target.value);
  };


          <FormControl fullWidth>
                <Select
                  value={category}
                  onChange={handleChange}
                >
                  <MenuItem value="Shirt">shirt sizes</MenuItem>
                  <MenuItem value="CM">CM</MenuItem>
                  <MenuItem value="ML">ML</MenuItem>
                </Select>
              </FormControl>

Conditionally rendering according to what was selected above:

const [size, setSize] = useState();
 function handleSelectionUpdate(data) {
    setSize1(data);
  }

{category === "shirt" && (
                <>
                  <TextField
                    label="Size"
                    type="text"
                    value={size}
                    onChange={(e) => setSize(e.target.value)}
                    required
                  />
                  <Size1 onSelectionUpdate={handleSelectionUpdate} />
                </>
              )}

The way I created CM and ML are the same:

 {category === "CM" && (
                <>
                  <TextField
                    label="Size"
                    type="text"
                    value={size}
                    onChange={(e) => setSize(e.target.value)}
                    required
                    InputProps={{
                      endAdornment: (
                        <InputAdornment position="end">CM</InputAdornment>
                      ),
                    }}
                  />
                </>
              )}

Saving this in firestore:
I created it as size: size + "-" + size1 because I wanted to it to show something like this size: 40CM

const docRef = await addDoc(collection(db, "products"), {
      //productName here
      size: size + "-" + size1,
    });
    setOpen(true);
    console.log("Document written with ID: ", docRef.id);