I have this form with multiple checkboxes and below it, I also have the `others` where the user can enter any value. The problem is that if I'll enter a value for the 2nd time, it will remove the previous value entered by the user.

Assuming that I've entered `books` for my first submit. Now, I want to submit another value for the `others` again, but this time it will be `movies`. I want to save in the firestore the both of these values; `books` and `movies`. The problem is that if I'll submit `movies`, this will override the previous one `books`, meaning it will replace `books`. How can I avoid that and at the same time display the multiple values entered by the user in the field `others`?

Below are the codes:

```
const sample = (props) => {
  const [others, setOthers] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      const user = firestore.collection("users").doc(id);
      const ref = user.set(
        {
          1: {
            choices,
            others
          }
        },
        { merge: true }
      );
      console.log(" saved");
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <FormGroup>
        //codes for the checkboxes here

          <TextField
            type="text"
            label="Others:"
            value={others}
            onChange={(e) => setOthers(e.target.value)}
            multiline
          />
        </FormGroup>
        <button type="submit">Submit</button>

        <br />
      </form>
    </>
  );
};

export default sample;

```