Ionic react datetime showing hours 2 hours in the past

I am new to Ionic React. I am trying to make a calendar app in which I can add/edit/delete Tasks. I can do all of that, but heres the issue.

When I edit the startDate or endDate the time seems to be 2 hours in the past. So when I create a startDate: 7-4-2024 13:00 and endDate 9-4-2024 23:59 and click edit, the values for startDate 7-4-2024 11:00 and for endDate 9-4-2024 21:59

Anyone have any idea on how to fix this? If anyone knows a better approach to doing this, ANY help is welcome :)!

EventComponentList.tsx:

interface TaskComponentProps {
    task: Task;
    index: number; // Index van de taak
    onDelete: () => void;
}

const TaskComponent: React.FC<TaskComponentProps> = ({task, index, onDelete}) => {
    const [newTask, setNewTask] = useState<Task>({...task}); // State for the new task
    const [editing, setEditing] = useState(false); // New state for editing mode
    const [expandedText, setExpandedText] = useState<string | null>(null); // State for expanded text

    const {
        handleInputChange,
        handleDateChange,
        handleToggleChange,
        handleEditTask,
    } = useTaskForm();

    // useEffect hook to reset newTask when editing mode is turned off
    useEffect(() => {
        if (!editing) {
            setNewTask({...task}); // Reset newTask when editing mode is turned off
        }
    }, [editing, task]);

    const handleEditClick = () => {
        setEditing(true); // Turn on editing mode
    };

    const handleSaveClick = () => {
        handleEditTask(index, newTask); // Save the edited task
        setEditing(false); // Turn off editing mode
    };

    const handleCancelClick = () => {
        setEditing(false); // Turn off editing mode
    };

    const toggleExpand = (textType: string) => {
        setExpandedText(expandedText === textType ? null : textType); // Toggle expanded text
    };

     return (
        <IonCard>
            
                <IonList className={'edit-task-form'}>
                    <IonItem>
                      <IonTextarea
                            label={"Name"}
                            labelPlacement={"floating"}
                            autoGrow={true}
                            name="name"
                            value={newTask.title}
                            onIonChange={(e) => setNewTask({...newTask, title: e.detail.value!})}
                        />
                    </IonItem>

                    {/* rest of the inputs */}

                    <IonItem>
                        <IonLabel>Start Date</IonLabel>
                        <IonDatetimeButton datetime="startDate"></IonDatetimeButton>
                        <IonModal keepContentsMounted={true}>
                            <IonDatetime
                                id="startDate"
                                onIonChange={handleDateChange('startDate')}
                                value={newTask.startDate.toISOString()}
                            >
                            </IonDatetime>
                        </IonModal>
                    </IonItem>
                    <IonItem>
                        <IonLabel>End Date</IonLabel>
                        <IonDatetimeButton datetime={"endDate"}></IonDatetimeButton>
                        <IonModal keepContentsMounted={true}>
                            <IonDatetime
                                id="endDate"
                                onIonChange={handleDateChange('endDate')}
                                value={newTask.endDate.toISOString()}
                            >
                            </IonDatetime>
                        </IonModal>
                    </IonItem>

TaskHelper.tsx:

export function useTaskForm() {

    const handleDateChange = (name: string) => (e: CustomEvent<any>) => {
        const value = new Date(e.detail.value);
        setNewTask(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

Task.tsx:

interface Task {
  title: string;
  description: string;
  startDate: Date;
  endDate: Date;
  openTimeSlot: boolean;
  remindMe: boolean;
  priority: number;
  category: number;
  url: string;
  note: string;
}

export default Task;

things I’ve tried:
1.
value={newTask.startDate ? newTask.startDate.toISOString() : undefined}
display-timezone=”UTC”
2.
value={newTask.startDate ? newTask.startDate.toISOString() : undefined} // Convert Date to string
onIonChange={(e) => setNewTask({…newTask, startDate: new Date(e.detail.value!)})}
3.
value={newTask.startDate.getTime() + 2 * 60 * 60 * 1000).toISOString()}

none of the above seem to work when editing a Task :`(