Please I am trying to insert data into my firestore and also want the data that I stored to immediately appear on my screen after submitting. The problem I am currently having is that once I insert the data into firestore, I have to reload the component before seeing it on my screen. Here is my code below, what am I Doing wrongly.

```
function CreateGroup({ currentUser }) {
  const [name, setName] = useState("");
  const [group, setGroup] = useState([]);

  const handleChange = (e) => {
    const { value, name } = e.target;

    setName({
      [name]: value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    createGroup(currentUser, name.name);
  };

  let id = currentUser ? currentUser.id : "";
  useEffect(() => {
    const fetchData = () => {
      if (id) {
        firestore
          .collection("users")
          .doc(id)
          .collection("group")
          .get()
          .then(function (snapshot) {
            snapshot.forEach(function (doc) {
            //   console.log(doc.id, " => ", doc.data());
              setGroup({
                id: doc.id,
                ...doc.data(),
              });
            });
          });
      }
    };
    fetchData();
  }, [id]);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="exampleInputTitle">Group Name</label>
          <input
            type="text"
            className="form-control"
            name="name"
            id="name"
            aria-describedby="TitleHelp"
            onChange={handleChange}
          />
        </div>

        <button type="submit" className="btn btn-primary">
          Add group{" "}
        </button>
      </form>
      <div>
        <div key={group.id}>
          {group.name} {group.admin}
        </div>
      </div>
    </div>
  );
}

```