diff --git a/src/components/modals/presets/list/list.tsx b/src/components/modals/presets/list/list.tsx
index 41a54bb..02d8bd4 100644
--- a/src/components/modals/presets/list/list.tsx
+++ b/src/components/modals/presets/list/list.tsx
@@ -26,15 +26,15 @@ export function List({ close }: ListProps) {
         <p className={styles.empty}>You don&apos;t have any presets yet.</p>
       )}
 
-      {presets.map((preset, index) => (
-        <div className={styles.preset} key={index}>
+      {presets.map(preset => (
+        <div className={styles.preset} key={preset.id}>
           <input
             placeholder="Untitled"
             type="text"
             value={preset.label}
-            onChange={e => changeName(index, e.target.value)}
+            onChange={e => changeName(preset.id, e.target.value)}
           />
-          <button onClick={() => deletePreset(index)}>
+          <button onClick={() => deletePreset(preset.id)}>
             <FaRegTrashAlt />
           </button>
           <button
diff --git a/src/stores/preset/index.ts b/src/stores/preset/index.ts
index 153d7d3..79733ad 100644
--- a/src/stores/preset/index.ts
+++ b/src/stores/preset/index.ts
@@ -5,8 +5,8 @@ import { v4 as uuid } from 'uuid';
 
 interface PresetStore {
   addPreset: (label: string, sounds: Record<string, number>) => void;
-  changeName: (index: number, newName: string) => void;
-  deletePreset: (index: number) => void;
+  changeName: (id: string, newName: string) => void;
+  deletePreset: (id: string) => void;
   presets: Array<{
     id: string;
     label: string;
@@ -21,9 +21,9 @@ export const usePresetStore = create<PresetStore>()(
         set({ presets: [{ id: uuid(), label, sounds }, ...get().presets] });
       },
 
-      changeName(index: number, newName: string) {
-        const presets = get().presets.map((preset, i) => {
-          if (i === index) return { ...preset, label: newName };
+      changeName(id: string, newName: string) {
+        const presets = get().presets.map(preset => {
+          if (preset.id === id) return { ...preset, label: newName };
 
           return preset;
         });
@@ -31,8 +31,8 @@ export const usePresetStore = create<PresetStore>()(
         set({ presets });
       },
 
-      deletePreset(index: number) {
-        set({ presets: get().presets.filter((_, i) => index !== i) });
+      deletePreset(id: string) {
+        set({ presets: get().presets.filter(preset => preset.id !== id) });
       },
 
       presets: [],