reactjs - Put the value of a key in the "value" field of an input when mapping through multiple inputs

Question

GOAL: Put the value of each social media key-value pair in the value={} field on my input

Here is my useEffect that queries my database:

useEffect(() => {
    if (user.username) {
      db.collection("public")
        .doc(user.username)
        .onSnapshot((doc) => {
          setProfile({
            location: doc.data().profileInfo.location,
            bio: doc.data().profileInfo.bio,
            displayName: doc.data().profileInfo.displayName,
            socialObject: doc.data().profileInfo.social,
          });
          setLoading(false);
        });
    }
  }, [user.username]);

My console log of my profile variables produces:

{
twitter: "awesome",
snapchat: "great"
}

In my input field, I want the value to equal the value of each property in my profile variable.

Currently, I don't know how to access the value of each item in the object and put it in the value={} field inside of the input:

 {socialMedia.map((social, index) => (
        <div className="profile_inputContainer">
          <ProfileIcon height={20} fill={"var(--snap-dark-background)"} />

          <input
            type="text"
            placeholder={`${social} Link`}
            spellCheck="false"
            onChange={(e) =>
              db
                .collection("public")
                .doc(user.username)
                .update({
                  [`profileInfo.social.${social}`]: e.target.value,
                })
            }
            value={profile.social}
          />
        </div>
      ))}

Answer 1

等待大神解答