how to refresh list of data changed by component - reactjs

Question

Description - I'm pulling a list of Material data from firestore and displaying it as a table. I've added a modal to add a Material to the database.
Problem - The refresh method I'm passing to the modal, refreshList() isn't refreshing the list of Materials on the Materials page. I'm quite certain the refresh method works—it's the same one I use to pull all Materials from firestore. what did I do wrong?
Here's the AddMaterialModal.
import { FC, useContext, useState } from "react";
import { ProjectContext } from "../../context/ProjectContext";
import MaterialService from "../../services/materialService";
import { Material } from "../../services/orgTypes";
import { randomString } from "../../utils/utils";
import AddEditTextModal from "./AddEditTextModal";
interface AddMaterialsModalProps {
editting?: boolean;
setOpenModal: (bool: boolean) => void;
selectedMaterial?: Material;
refreshList?: () => void;
}
const AddMaterialModal: FC<AddMaterialsModalProps> = ({
editting,
setOpenModal,
selectedMaterial,
refreshList,
}) => {
const idTemp = randomString(20);
const projectContext = useContext(ProjectContext);
const [newMaterial] = useState<Material>({
material: "material",
actualquantity: "actualquantity",
size: "size",
id: idTemp,
description: "description",
type: "type",
unit: "unit",
quantity: "quantity",
});
const materialService = new MaterialService(
projectContext.selectedProject.id
);
const createNewMaterial = () => {
materialService.updateCreateGlobalMaterial(newMaterial);
if (refreshList != undefined) {
refreshList();
setOpenModal(false);
}
};
return (
<div>
<div className="flex flex-col gap- 2 w-full h-fit ">
{//input some material data here.}
</div>
<div className="flex justify-center align-center">
<button
onClick={createNewMaterial}
className=" w-fit px-6 py-2.5 mt-6 bg-flowius-blue text-white font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-blue-400 hover:shadow-lg focus:bg-cyan-400 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-500 active:shadow-lg
transition duration-150 ease-in-out"
>
{editting ? "UPDATE" : "ADD +"}
</button>
</div>
</div>
);
};
export default AddMaterialModal;
And here's the main Materials page.
import { FC, useCallback, useContext, useEffect, useState } from "react";
import DataTable from "react-data-table-component";
import { ProjectContext } from "../context/ProjectContext";
import { Material } from "../services/orgTypes";
import Loader from "../components/Loader";
import MaterialIcon from "../components/MaterialIcon";
import { toast } from "react-toastify";
import MaterialService from "../services/materialService";
import Modal from "../components/modal/Modal";
import AddMaterialModal from "../components/modal/AddMaterialModal";
interface Selected {
allSelected: boolean;
selectedCount: number;
selectedRows: Material[];
}
export const formatDate = (date: Date) => {
const month = date.toLocaleString("en-us", { month: "long" });
const year = date.getFullYear();
const day = date.getDate();
return `${day} ${month} ${year}`;
};
const Materials: FC = () => {
const [materials, setMaterials] = useState<Material[]>([]);
const [loading, setLoading] = useState(true);
const [selected, setSelected] = useState<Selected>();
const projectContext = useContext(ProjectContext);
const { id } = projectContext.selectedProject;
const materialService = new MaterialService(id);
const pullMaterials = useCallback(async () => {
if (!id) return;
const materials = await materialService.getProjectMaterials();
setMaterials(materials);
setLoading(false);
}, [id]);
const [openAddMaterialModal, setOpenAddMaterialModal] = useState(false);
useEffect(() => {
pullMaterials();
}, [pullMaterials]);
const columns = [
{
name: "Material",
selector: (row: Material) => row.material,
sortable: true,
},
{
name: "Description",
selector: (row: Material) => row.description,
sortable: true,
},
{
name: "Size",
selector: (row: Material) => row.size,
sortable: true,
},
{
name: "Unit",
selector: (row: Material) => row.unit,
sortable: true,
},
{
name: "Actual Quantity",
selector: (row: Material) => row.actualquantity,
sortable: true,
},
];
const deleteSelected = async () => {
if (!selected) return;
const { selectedRows } = selected;
materialService.deleteGlobalMaterial(selectedRows);
toast.success(`${selectedRows.length} Items deleted`);
pullMaterials();
setSelected(undefined);
};
return (
<div className="m-2 w-full">
<div className="flex text-flowius-blue text-xl flex-row justify-between my-1">
<button
className="bg-flowius-blue text-base text-white p-2 rounded-md"
onClick={() => {
setOpenAddMaterialModal(true);
}}
>
Add Material
</button>
</div>
{(selected?.selectedCount ?? 0) > 0 && (
<MaterialIcon
className="cursor-pointer "
onClick={deleteSelected}
icon="delete"
/>
)}
{loading ? (
<Loader />
) : (
<DataTable
selectableRows={true}
paginationRowsPerPageOptions={[50, 100, 150]}
paginationPerPage={50}
onSelectedRowsChange={setSelected}
pagination={true}
columns={columns}
data={materials}
defaultSortAsc={true}
defaultSortFieldId="Material"
/>
)}
{setOpenAddMaterialModal && (
<Modal
open={openAddMaterialModal}
close={() => {
setOpenAddMaterialModal(false);
}}
title={"Add Material"}
className={""}
>
<AddMaterialModal
editting={false}
setOpenModal={setOpenAddMaterialModal}
refreshList={pullMaterials}
/>
</Modal>
)}
</div>
);
};
export default Materials;