Passing functions to child components

Question

I'm creating a simple SPFX extension to manage a task list. I have created a list which gets items via REST through pnpjs.

I want to be able to delete said items by clicking on a button. When I click the delete button, a modal (WarningModal) opens, asking for confirmation. I have managed to create a working example, but I'm having a hard time understanding why it works. When I try to follow the guides in the official docs(https://reactjs.org/docs/faq-functions.html), I can't get my code to work.

Render method in parent component:

public render = (): React.ReactElement<ITakenbeheerProps> => {
const {
  taken,
  showErrorMessage,
  errorMessage,
  showSuccessMessage,
  successMessage,
  isDataLoaded,
  showTryAgainButton,
  showDeleteModal,
  deleteModalTitle,
  deleteModalContent,
  deleteModalOkCallback,
  deleteModalCancelCallback,
} = this.state;
const { ShimmerCollection } = this;
let AssignTaskModal = this.AssignTaskModal;
let addTaskIcon: IIconProps = { iconName: "AddToShoppingList" };

return (
  <Stack
    tokens={this.verticalGapStackTokens}
    className={styles.takenBeheer}
  >
    <ActionButton iconProps={addTaskIcon}>
      {strings.NieuweTaakButton}
    </ActionButton>

    {showErrorMessage ? (
      <MessageBar
        messageBarType={MessageBarType.error}
        isMultiline={false}
        onDismiss={this.onResetAllMessageBars}
      >
        {errorMessage}
      </MessageBar>
    ) : null}

    {showSuccessMessage ? (
      <MessageBar
        messageBarType={MessageBarType.success}
        isMultiline={false}
        onDismiss={this.onResetAllMessageBars}
      >
        {successMessage}
      </MessageBar>
    ) : null}

    <Stack horizontalAlign={"center"}>
      {showTryAgainButton && (
        <PrimaryButton
          text={strings.TryAgain}
          onClick={this._populateList}
        />
      )}
    </Stack>

    <ShimmerCollection />

    {isDataLoaded ? (
      <div>
        {taken.findIndex((t) => t.toegewezenAan.name == null) > -1 ? (
          <List
            items={taken.filter((t) => {
              return t.toegewezenAan.name == null;
            })}
            onRenderCell={this.onRenderCell}
          />
        ) : (
          <div className={styles.noNewTasks}>{strings.NoNewTasks}</div>
        )}
      </div>
    ) : null}

    <AssignTaskModal />
    <WarningModal
      isModalOpen={showDeleteModal}
      title={deleteModalTitle}
      content={deleteModalContent}
      okCallback={deleteModalOkCallback}
      cancelCallback={deleteModalCancelCallback}
    />
  </Stack>
);};

The warning modal Screenshot

import * as React from "react";
import * as strings from "CicOvlTakenlijstWebPartStrings";
import {
  Modal,
  DialogFooter,
  DefaultButton,
  Button,
  getTheme,
  mergeStyleSets,
  FontWeights,
} from "office-ui-fabric-react";

/* Prop definition */
export interface IWarningModalProps {
  isModalOpen: boolean;
  title: string;
  content: string;
  okCallback: any;
  cancelCallback: any;
}

/* State definition */
export interface IWarningModalState {}

export default class WarningModal extends React.Component<
  IWarningModalProps,
  IWarningModalState
> {
  public constructor(props: IWarningModalProps) {
    super(props);
    this.state = {
      /* State initialization */
      isModalOpen: false,
    };
  }
  public render(): React.ReactElement<IWarningModalProps> {
    const {
      isModalOpen,
      okCallback,
      cancelCallback,
      title,
      content,
    } = this.props;

    return (
      <Modal
        isOpen={isModalOpen}
        isBlocking={false}
        containerClassName={contentStyles.container}
      >
        <div className={contentStyles.header}>
          {title}
        </div>
        <div className={contentStyles.body}>
          {content}
          <DialogFooter>
            <DefaultButton onClick={okCallback} text={strings.OkMessage} />
            <Button onClick={cancelCallback} text={strings.CancelMessage} />
          </DialogFooter>
        </div>
      </Modal>
    );
  }
}

Why does this work? I would expect the code in the warning modal to be as following, with an arrow function:

<DialogFooter>
            <DefaultButton onClick={() => okCallback()} text={strings.OkMessage} />
            <Button onClick={() => cancelCallback()} text={strings.CancelMessage} />
</DialogFooter>

But when I click the buttons, nothing happens. The debugger also doesn't show any error message.