Replace Multiple Characters in string with others Characters React JS

Question

I have an array of special characters which I map and use .replaceAll to change the special character if they are in the string.

When it changes the first type of character it goes well but the second change removes the first change.

Here is my code:

ARRAY

The complete array has all the special characters

[
    {
        content: " ",
        replace: "20%"
    },
    {
        content: "!",
        replace: "21%"
    }
]

MAP FUNCTION

Codes.map((code, index) => {
  if (message.includes(code.content)) {
        
   let messageReplace = message.replaceAll(code.content, code.replace)
          
   setMessage(messageReplace)
  }

MESSAGE Hello Friend!

FIST REPLACE Hello20%Friend!

SECOND REPLACE Hello Friend21%

WHAT I AIM Hello20%Friend21%