How to re-render a component after clicking a bootstrap modal button in React.js

So I want to delete a user from my database, for just to confirm a user's action, I'm showing a warning on modal, If user will click the Delete button on modal, the delete function will be called. All works good except one thing, after deletion, my component is not re-rendering, for that purpose I need to use window.location.reload() which causes the whole page reload, to show the updated list of the users, but I don't want a full page reload, just want that specific component to be updated.

Here's the button which is calling the modal and updating value in a use state hook

<i
                        data-toggle="modal"
                        data-target="#exampleModal"
                        style={{ cursor: "pointer" }}
                        onClick={() => setDelUser(val.userEmail)}
                        className="fas fa-trash-alt"
                      ></i>

Here's the button on the modal which is dismissing the modal and calling the delete function

<button
                  type="submit"
                  data-dismiss="modal"
                  onClick={handleDelete}
                  type="button"
                  class="btn btn-primary"
                >
                  Delete
                </button>

And here's the delete function

const handleDelete = async () => {
if (delUser === admin) {
  toast.error("Cannot delete the default admin!");
  return;
} else {
  try {
    const result = await Http.post(`${Config.apiUrl}/users/delete`, {
      email: delUser,
    });
    setDelUser("");
  } catch (ex) {
    if (ex.response && ex.response.status === 404) {
      toast.error(ex.response.data);
    }
  }
}

};