Toggle Function Logic for If Statement to send to Form Javascript

Question

I am trying to toggle between if statements to show a button and add an object to a "roles" array. This is not using State at the moment. If I could use state possibly how would I implement it? Again I am updating an array in a form not to the state itself because these roles are individual objects in one array.

I am able to remove one of the buttons and objects but when I try to add the other object back on the conditional, I receive the first array again causing a duplicate. What exactly am I doing wrong here with my logic?

js.component

 const roleUUID = profile.roles[0].uuid
const roleLabId = profile.roles[0].labId

if (form.roles[0].name === 'First Program User') {
  setForm({
    ...form,
    roles: [...form.roles, { roleId: '3', name: 'First Program User', uuid: roleUUID, labId: roleLabId, labTypeId: '1' }]
  })
}

if (profile.roles[0].name === 'Program User') {
  setForm({
    ...form,
    roles: [...form.roles, { roleId: '2', name: 'Second Program User', uuid: roleUUID, labId: roleLabId, labTypeId: '2'  }]
  })
}

console.log('added form roles =>>> ', form.roles)