How to update hashmap and where can I put a reset for link state on React?

So Im having problems with a form in which takes in text inputs to be set on an object. This object will then be updated in a hashmap of <key, object>.

So far, I can type in the input areas, but if I add another item in the hashmap which generates another div with the input elements it will contain the same value of the previous inputs.

So I need a way to reset those labels within the form and a way to update the hashmap.

I got an updateMap function, but I don't know where to place it for it to await the changes.

Edit: I need to reset the state of link, but when I do a function for it. It says something about preventing infinite loops.

export default function Admin() {
  const [link, setLink] = useState({ name: "", link: "" });
  const [links, setLinks] = useState(new Map());

  const clickAddLink = () => addToMap(links.size + 1, link);
  const deleteOnMap = (key) => {
    setLinks((prev) => {
      const newState = new Map(prev);
      newState.delete(key);
      return newState;
    });
  };

const getName = (key) =>
  { 
    let linkFromKey = links.get(key)
    return linkFromKey.name
  }

  const getLink = (key) =>
  { 
    let linkFromKey = links.get(key)
    return linkFromKey.link
  }

  const addToMap = (key, value) => {
    setLinks((prev) => new Map([...prev, [key, value]]));
  };
  const updateMap = (key, value) => {
    setLinks((prev) => new Map([...prev, [key, value]]));
  };

  const clear = () => {
    setLinks((prev) => new Map(prev.clear()));
  };

.... skipping code ....

 <div>
                     {console.log(link.name)}
                    {console.log(link.link)}
                    {[...links.keys()].map((key) => (
                      <div key={key}>
                        {links.size > 0 && (
                          <div>
                            <form>
                              <span>Name</span>
                              <input
                                type="text"
                                placeholder={getName(key)} 
                                required
                                value={link.name}
                                onChange={(e) =>
                                  setLink({ name: e.target.value })
                                }
                                
                              />
                              <span>Link</span>
                              <input
                                type="text"
                                placeholder={getLink(key)} 
                                required
                                value={link.link}
                                onChange={(e) =>
                                  setLink({ link: e.target.value })
                                }
                              />
                            </form>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                  {console.log(link.name)}
                  {console.log(link.link)}
                </div>
    ```