Q:

React hooks updating a parent state from multiple child components

My parent component makes copies of child component onClick. My goal is for every child component, after a user inputs a select value and a textfield value it appends onto the parent component's map value. I used an approach that passes in a function that edits the map object, but after console logging I realize it just resets the map value for every child component submission. Any suggestions on how to fix this problem?
ex) if user picks instagram with 'www.instagram.com/user' in one child component and facebook with 'www.facebook.com/user' in the other child component, the parent component will ultimately have a map of both key value pairs.
Parent component (Admin.js)
const Admin = () => {
  const links = new Map();
  const [newLink, setNewLink] = useState([]);

  const addLinkToMap = (type, url) => {
    links.set(type, url);
  }

  return (
    <>
      {newLink ? newLink.map(child => child) : null}
        <Button onClick={() => {
           setNewLink(
             [ ...newLink, 
               <AddNewLink key={Math.random()} linkMap={addLinkToMap}/>
             ]
        )}}>
          Add new social media
        </Button>
    </>
  );
}

export default Admin;

Child component (AddNewLink.js)
const AddNewLink = props => {
  const [socialMedia, setSocialMedia] = useState('');
  const [url, setUrl] = useState('');
  const linkMap = props.linkMap;

  const handleSubmit = () => {
    linkMap(socialMedia, url);
  }

  return (
    <>
      <FormControl>
        <InputLabel>Select Social Media</InputLabel>
          <Select
            value={socialMedia}
            onChange={e => {setSocialMedia(e.target.value)}}
          >
            <MenuItem value={'facebook'}>Facebook</MenuItem>
            <MenuItem value={'instagram'}>Instagram</MenuItem>
            <MenuItem value={'tiktok'}>TikTok</MenuItem>
          </Select>
      </FormControl>
      <form>
        <TextField label="Enter link" onChange={e => {setUrl(e.target.value)}}/>
      </form>
      <div>
        <Button onClick={() => handleSubmit()}>Submit</Button>
      </div>
    </>
  )
}

export default AddNewLink;

A:

the problem is that whenever you set the state with a call to setLink your function gets called again, which means the value of the variable links resets every time the state is changed, one way to overcome this issue is to use a useState call insted of creating a variable for the links map. like so:
const [links, setLinks] = useState({});

const addLinkToMap = (type, url) => {
    setLinks({
       ...links,
       type: url
     });
}

