You need to set the checked property of the checkbox

Also you've defined name twice

<input
 name={role.id}
 type="checkbox"
 class="new-control-input"
 onChange={onChangeChecked}
 checked="checked"
/>

You need to use checked to set the condition for when the checkbox is checked but also value to make sure the correct value is passed when the onChange event is fired. Sample implementation - https://codesandbox.io/s/focused-dream-yv7kj?file=/src/App.js

• use useEffect to mark the checkboxes coming from the api.

• create an array to hold all the ids of the checked ones.

• in the input use checked property to identify if the id is exists in the checked array or not.

  const [allRoles, setAllRoles] = useState([
    {
      id: 2,
      name: "Administrador"
    },
    {
      id: 3,
      name: "Firmante"
    },
    {
      id: 4,
      name: "Trabajador"
    },
    {
      id: 5,
      name: "Gestión de Usuarios"
    },
    {
      id: 6,
      name: "Admin Workflow"
    },
    {
      id: 7,
      name: "Representante Legal"
    },
    {
      id: 8,
      name: "Seguimiento de Notificaciones"
    }
  ]);
  
  const [checkedRoles] = useState([
    {
      id: 3,
      name: "Firmante"
    },
    {
      id: 4,
      name: "Trabajador"
    }
  ]);
  
  const [acceptedRoles, setAcceptedRoles] = useState([]);
  
  useEffect(() => {
    const rolesIds = checkedRoles.map((r) => r.id.toString());
    setAcceptedRoles(rolesIds);
  }, [checkedRoles]);
  
  const onChangeChecked = (e) => {
    let newCheckedRoles = [];
  
    const isExist = checkedRoles.filter(
      (r) => r.id.toString() === e.target.id
    );
  
    if(isExist && isExist.length > 0) {
       newCheckedRoles = checkedRoles.filter(
         (r) => r.id.toString() !== e.target.id
       );
     }else {
        newCheckedRoles = [...checkedRoles, {
          id: e.target.id,
          name: e.target.name
        }]
     }
  
    setCheckedRoles(newCheckedRoles);
  };
  
  return (
    <div className="App">
      <dt>
        <label className="mb-2">Roles</label>
        {allRoles.map(({ name, id }, i) => {
          return (
            <div key={i}>
              <label className="new-control new-checkbox checkbox-primary">
                <input
                  id={id}
                  type="checkbox"
                  name="features"
                  className="new-control-input"
                  onChange={onChangeChecked}
                  checked={acceptedRoles.includes(id.toString())}
                />
                <span className="ml-2 new-control-indicator">{name}</span>
              </label>
            </div>
          );
        })}
      </dt>
    </div>
  );
  

working sample demo - codesandbox.io/s/stupefied-wozniak-4ye6l