Props undefined when calling a method in a react component

I have a component with a list of child components. When I call a method from the parent component from the child component and, in the code I am using props, I get an

"Uncaught TypeError: Cannot read property 'activeStep' of undefined"

Where activeStep is a member of props.

Here is the relevant part om my code.

Parent component

import { Component, ReactNode, createElement, ReactFragment } from "react";
import { SlidingWizardStepComponent } from "./SlidingWizardStepComponent";

export interface SlidingWizardComponentProps {
    activeStep: number;
}

export class SlidingWizardComponent extends Component<SlidingWizardComponentProps> {
    getWizard = (): JSX.Element[] => {
        if (!this.props.activeStep && this.props.activeStep !== 0) {
            return [];
        }
        return = this.createWizard();
    };

    private setActiveStep(clickedStep: number): void {
        if (clickedStep !== this.props.activeStep) {
            this.props.setActiveStep(clickedStep);
        }
    }

    private createWizard(): JSX.Element[] {
        const wizardSteps: JSX.Element[] = [];
        for (let i = 0; i < this.props.numberOfSteps; i++) {
            wizardSteps.push(
                <SlidingWizardStepComponent setActiveStep={this.setActiveStep} />
            );
        }
        return wizardSteps;
    }

    render(): ReactNode {
        return (
            <div className="slide-wizard">
                {this.getWizard()}
            </div>
        );
    }
}

Child component

import { Component, ReactNode, createElement, ReactFragment } from "react";

export interface SlidingWizardStepComponentProps {
    setActiveStep: (clickedStep: number) => void;
}

export class SlidingWizardStepComponent extends Component<SlidingWizardStepComponentProps> {
    private setActiveStep(): void {
        this.props.setActiveStep(this.props.stepIndex);
    }

    render(): ReactNode {
        return (
            <div onClick={() => this.setActiveStep()}>
                Content
            </div>
        );
    }
}

EDIT: When I add a constructor to the code and I log my props in the constructor, they seem to be set!

EDIT 2: The parent component itself is called by another component that looks like this in its stripped down form:

import { Component, ReactNode, createElement, ReactFragment } from "react";
import { SlidingWizardComponent } from "./components/SlidingWizardComponent";
import Big from "big.js";
import { SlidingWizardContainerProps } from "../typings/SlidingWizardProps";

import "./ui/SlidingWizard.css";

export interface State {
    activeStep: number;
    clickedStep: number;
}

export default class SlidingWizard extends Component<SlidingWizardContainerProps, State> {
    state: State = {
        activeStep: parseInt(this.props.activeStep.displayValue, 10),
        clickedStep: parseInt(this.props.clickedStep.displayValue, 10)
    };

    resetActiveStep = (): void => {
        this.props.activeStep.setValue(new Big(0));
        this.setState({
            activeStep: 0
        });
    };

    setActiveStep = (clickedStep: number): void => {
        this.props.clickedStep.setValue(new Big(clickedStep));
        if (this.props.onActiveStepChange) {
            this.props.onActiveStepChange.execute();
        }
    };

    render(): ReactNode {
        return (
            <SlidingWizardComponent
                activeStep={this.state.activeStep}
            />
        );
    }
}

This widget is used in a Mendix application. The parameters used in this top component are defined through an xml file.