React.js - Passing function through component - "handleChange is not a function"

Question

I don't know what to do. In other apps I have programmed it worked, but this time I don't know what is wrong. I am trying to pass a function through a component and it tells me that this function is not a function.

User form: I want to create a user form with steps. I created the handleChange and try to pass it to the FormUserDetails component.

import React, { Component } from "react";

// Components
import FormUserDetails from "./FormPersonalDetails";

export class UserForm extends Component {
  state = {
    step: 1,
    firstName: "",
    lastName: "",
    email: "",
    occupation: "",
    city: "",
    bio: "",
  };

  // Proceed to next step
  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1,
    });
  };

  // Go back to prev step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1,
    });
  };

  // Handle fields change
  handleChange = (input) => (e) => {
    this.setState({ [input]: e.target.value });
  };

  render() {
    const { step } = this.state;
    const { firstName, lastName, email, occupation, city, bio } = this.state;
    const values = { firstName, lastName, email, occupation, city, bio };

    switch (step) {
      case 1:
        return <FormUserDetails nextStep={this.nextStep} handleChange={this.handleChange} values={values} />;
      case 2:
        return <h1>FormPersonalDetails</h1>;
      case 3:
        return <h1>Confirm</h1>;
      case 4:
        return <h1>Success</h1>;
      default:
        return console.log("This is a multi-step form built with React.");
    }
  }
}

export default UserForm;

Component: Inside the component I try no to get it via the props, but what I get is an undefined prop value from my console log and an "TypeError: handleChange is not a function". I must be blind to not see what is wrong.

import React, { Component } from "react";

// Styles
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";

export class FormUserDetails extends Component {
  continue = (e) => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values, handleChange } = this.props;
    console.log(handleChange, "Handle Change");
    return (
      <MuiThemeProvider>
        <React.Fragment>
          <AppBar title="Enter User Details" />
          <br />
          <TextField placeholder="Enter Your First Name" label="First Name" onChange={handleChange("firstName")} defaultValue={values.firstName} />
          <br />
          <TextField hintText="Enter Your Last Name" floatingLabelText="Last Name" onChange={handleChange("lastName")} defaultValue={values.lastName} />
          <br />
          <TextField hintText="Enter Your Email" floatingLabelText="Email" onChange={handleChange("email")} defaultValue={values.email} />
          <br />
          <RaisedButton label="Continue" primary={true} style={styles.button} onClick={this.continue} />
        </React.Fragment>
      </MuiThemeProvider>
    );
  }
}

const styles = {
  button: {
    margin: 15,
  },
};

export default FormUserDetails;

Thanks for helping.