i am trying to build a workout and the user will add an exercise in which case they will be redirected to another page where they can select an exercise and input the number of desired sets and reps. This has no issue and works smoothly. however when i try to delete an exercise i am facing difficulty

this is the build page:

"use client";
import React from 'react';
import { useAtom } from 'jotai';
import { viewAtom } from '../../../utility/viewAtom'; // Import the view atom
import WorkoutBuilderContent from '../../components/build/WorkoutBuilderContent';
import RoutineBuilderContent from '../../components/build/RoutineBuilderContent';

const WorkoutBuilder = () => {
  const [view, setView] = useAtom(viewAtom); // Use the view atom

  return (
    <div className="container mx-auto p-4">
      <div className="flex justify-center mb-4 space-x-4">
        <button
          onClick={() => setView('workout')}
          className={`px-4 py-2 font-semibold rounded ${view === 'workout' ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'}`}
        >
          Build Workout
        </button>
        <button
          onClick={() => setView('routine')}
          className={`px-4 py-2 font-semibold rounded ${view === 'routine' ? 'bg-purple-500 text-white' : 'bg-gray-300 text-gray-700'}`}
        >
          Build Routine
        </button>
      </div>
      {view === 'workout' && <WorkoutBuilderContent setView={setView} />}
      {view === 'routine' && <RoutineBuilderContent />}
    </div>
  );
};

export default WorkoutBuilder;

which will utilize this component

import React, { useState, useEffect } from 'react';
import { useAtom } from 'jotai';
import { workoutAtom, getExerciseAtom, deleteExerciseAtom   } from '../../../utility/exerciseAtom';
import { useRouter } from 'next/navigation';
import { PlusIcon } from '@heroicons/react/24/solid';
import ExercisePanel from './ExercisePanel';
import { useAtomValue } from 'jotai';
import useResetAtoms from '../../../utility/useResetAtoms'; // Import the reset hook
import { profileIdAtom } from '../../../store';

const WorkoutBuilderContent = ({ setView }) => {
  const [workout, setWorkout] = useAtom(workoutAtom);
  const [exerciseIds, setExerciseIds] = useState(workout.exerciseIds); // Local state for exerciseIds
  const [loading, setLoading] = useState(false); // Loading state
  const router = useRouter();
  const resetAtoms = useResetAtoms(); // Get the reset function
  const [error, setError] = useState(null); // State for error message
  const [currentUser] = useAtom(profileIdAtom);
  const [isPublic, setIsPublic] = useState(workout.public);

  useEffect(() => {
    setExerciseIds(workout.exerciseIds);
  }, [workout.exerciseIds]);

  const exercisesDetails = exerciseIds.map(id => {
    const exerciseAtom = getExerciseAtom(id);
    return { ...useAtomValue(exerciseAtom), id }; // Ensure id is included
  });

  const handleAddExercise = () => {
    router.push('/build/exercises'); // Navigate to the exercises page
  };

  const handleDeleteExercise = (id) => {
    console.log(exerciseIds);
    console.log(id);
    var filtered = exerciseIds.filter((name) => name !== id);
    setExerciseIds(filtered);
    // Remove the corresponding atom from the exerciseAtoms map
    deleteExerciseAtom(id);
    //router.push('/home');
  };

  const renderedExercisePanels = exerciseIds.map((exerciseId) => (
    <ExercisePanel key={exerciseId} id={exerciseId} onDelete={handleDeleteExercise} />
  ));


  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Build Workout</h2>
      {error && (
        <div className="mb-4 p-4 text-sm text-red-700 bg-red-100 rounded-lg" role="alert">
          <span className="font-medium">Error:</span> {error}
        </div>
      )}
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">Workout Name:</label>
        <input
          type="text"
          value={workout.name}
          onChange={(e) => setWorkout({ ...workout, name: e.target.value })}
          className="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
        />
      </div>
      <div className="flex items-center mb-4">
        <label className="block text-sm font-medium text-gray-700 mr-2">Public:</label>
        <input
          type="checkbox"
          checked={isPublic}
          onChange={handleCheckboxChange}
          className="form-checkbox h-5 w-5 text-blue-600"
        />
      </div>
      <div className="flex justify-end mb-4">
        <button
          onClick={handleAddExercise}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center"
        >
          <PlusIcon className="w-5 h-5 mr-2" />
          Add Exercise
        </button>
      </div>
      <div className="space-y-4">
        {renderedExercisePanels}
      </div>
      <div className="mt-4">
        <button
          onClick={handleSaveWorkout}
          className="w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
        >
          Save Workout
        </button>
      </div>
    </div>
  );
};

export default WorkoutBuilderContent;

Note: i removed some functions to reduce size of code

and this uses this panel component

import React from 'react';
import { useAtom } from 'jotai';
import { getExerciseAtom } from '../../../utility/exerciseAtom';

const ExercisePanel = ({ id, onDelete }) => {
  const [exercise] = useAtom(getExerciseAtom(id));

  const getImage = (id) => {
    // Assuming the images are stored locally in the public/images directory
    // Replace this logic with the actual path to your images
    return `/exercises/${id}/0.jpg`;
  };

  return (
    <div className="flex items-center p-4 border rounded-md shadow-md bg-white mb-4">
      <img
        src={getImage(id)}
        alt={exercise.name}
        className="w-16 h-16 rounded mr-4"
      />
      <div className="ml-4 flex-grow">
        <h3 className="text-lg font-bold">{exercise.name}</h3>
        <p className="text-sm">{exercise.sets}x - {exercise.reps} reps</p>
      </div>
      <button
        onClick={() => onDelete(id)}
        className="text-red-500 hover:text-red-700"
      >
        Delete
      </button>
    </div>
  );
};

export default ExercisePanel;

This is how the exercise is being added to the atom on when the page has been redirected

    if (!workout.exerciseIds.includes(id)) {
      setWorkout((prevWorkout) => ({
        ...prevWorkout,
        exerciseIds: [...prevWorkout.exerciseIds, id],
      }));
    }

Note these are the atoms

import { atom } from 'jotai';

// Atom to store workout name, list of exercise IDs, and public/private status
export const workoutAtom = atom({
  name: '', // workout name
  exerciseIds: [], // generated ids
  public: false // public/private status
});

// Map to store exercise atoms
const exerciseAtoms = new Map();

export const getExerciseAtom = (id) => {
  if (!exerciseAtoms.has(id)) {
    exerciseAtoms.set(
      id,
      atom({
        id,
        name: '', // exercise name
        sets: 0,
        reps: 0
      })
    );
  }
  return exerciseAtoms.get(id);
};

getExerciseAtom.clearExerciseAtoms = () => {
  exerciseAtoms.clear();
};

// Function to delete an exercise atom
export const deleteExerciseAtom = (id) => {
  if (exerciseAtoms.has(id)) {
    exerciseAtoms.delete(id);
  }
};

import { atom } from 'jotai';

export const viewAtom = atom(''); // Default to neither choice

i have tried various things based on what i have seen for similar issues. the problem is i am a little unsure as to why this is ocurring so trying to fix it is a challenge.