Button doesnt work after adding mobx-react-lite the code doesnt show any error but it doesnt work it displays the list but button inside doesnt work

So i set up mobx and the files show no error in visual studio code and the react client app compile just fine and it shows the list of Departments but there is also a button thats not working its set up all fine and the onClick event is all fine but it doesnt work I had problems with mobx because its greater than version 6 or idk its version so i had to add the construvtor to display the list

Department store

import {observable, action, makeObservable} from 'mobx';import { createContext } from 'react';import agent from '../api/agent';import { IDepartment } from '../models/department';class DepartmentStore {    @observable departments: IDepartment[] = [];    @observable selectedDepartment: IDepartment | undefined;    @observable loadingInitial = false;    @observable editMode =false;    constructor() {      // Just call it here      makeObservable(this);    }    @action loadDepartments= () => {        this.loadingInitial = true;        agent.Departments.list()        .then(departments => {            departments.forEach((department) => {            this.departments.push(department);          })        }).finally(() => this.loadingInitial = false);    };    @action selectDepartment = (id: string) => {      this.selectedDepartment = this.departments.find(d => d.id === id);      this.editMode = false;    }}export default createContext(new DepartmentStore());

so everything here shows no error below ill display the DepartmentList code where it contains the button thats now functioning

import { observer } from "mobx-react-lite";import React, { SyntheticEvent, useContext } from "react";import { Item, Button, Segment } from "semantic-ui-react";import { IDepartment } from "../../../app/models/department";import DepartmentStore from "../../../app/stores/departmentStore";interface IProps {  deleteDepartment: (event: SyntheticEvent<HTMLButtonElement>,id: string) => void;  submitting: boolean;  target: string;}export const DepartmentList: React.FC<IProps> = ({  deleteDepartment,  submitting,  target}) => {  const departmentStore = useContext(DepartmentStore);  const {departments, selectDepartment} = departmentStore;  return (<Segment clearing><Item.Group divided>        {departments.map((department) => (<Item key={department.id}><Item.Content style={{ display: "flex" }}><Item.Header style={{ width: "100%", marginTop: "1em" }}>                {department.name}</Item.Header><Item.Extra><Button                  name={department.id}                  loading={target === department.id && submitting}                  onClick={(e) => deleteDepartment(e, department.id)}                  content="Delete"                  color="red"                  floated="right"                /><Button                  onClick={() => selectDepartment(department.id)}                  content="View"                  color="blue"                  floated="right"                                  /></Item.Extra></Item.Content></Item>        ))}</Item.Group></Segment>  );};export default observer(DepartmentList)

;