[Bug] updateState is not a function

hola me tira un error (TypeError: updateState is not a function) al clickear el boton de siguiente. comparto mi codigo: Form :

import React, { useState } from "react";
import { Box, Typography } from "@mui/material";
import { LogoSpace,  FormSpace, Img } from "./styles";
import DatosUsuario from "./DatosUsuario";
import DatosPersonales from "./DatosPersonales";
import DatosEntrega from "./DatosEntrega";
import Complete from "./Complete";
import Stepper from "../Stepper";

const Form = () => {
const [step,setStep] = useState(0);

const updateStep = (step) => {
console.log("actualizar paso", step);
setStep(step);
};

  const steps = {
    0: <DatosUsuario updateStep={updateStep}/>,
    1: <DatosPersonales updateStep={updateStep}/>,
    2: <DatosEntrega updateStep={updateStep}/>,
    3:<Complete/>,
  };



  return (
    <Box
      sx={{
        padding: "30px",
        display: "flexbox",
        flexDirection: "column",
      }}
    >
      <LogoSpace>
        <Img src={"/favicon.png"} />
        <Typography variant="h3">AluraFood</Typography>
      </LogoSpace>
      <FormSpace>
        {step < 3 && <Stepper step={step}/>}
       {/* <DatosUsuario />
      <DatosPersonales />
        <DatosEntrega />*/}
        { steps[step] }
      </FormSpace>
    </Box>
  );
};

export default Form;

DatosUsuario :

import React, { useState } from "react";
import { TextField, Button, Box } from "@mui/material";
import { validarEmail, validarPassword } from "./validaciones";

const DatosUsuario =({updateState}) => {
  const [email,setEmail] = useState({value:"",valid: null})
const [password,setPassword]= useState({value:"",valid:null})


    return (
      <Box
        component="form"
        autocomplete="off"
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
        }}
        onSubmit={(e) => {
          e.preventDefault();
          if( email.valid && password.valid){
          console.log("siguiente formulario");
          console.log(email, password);
          updateState(1);
        }else{
          console.log("no hacer nada")
        }
        }}
      >
        <TextField
          label="Correo electrónico"
          variant="outlined"
          fullWidth
          margin="dense"
          type="email"
          error={email.valid === false}
          helperText={email.valid === false && "Ingresa un correo electrónico válido"}
          value={email.value}
          onChange={(input) => {
            const email = input.target.value
            const valido = validarEmail(email);
            setEmail({value: email, valid: valido})
            }}
        />
        <TextField
          label="Contraseña"
          variant="outlined"
          fullWidth
          margin="dense"
          type="password"
          error={ password.valid === false}
          helperText={password.valid === false && "Ingresa una contraseña válida, Al menos 8 caracteres y maximo 20"}
          value={password.value}
          onChange={(input) => {
            const password=input.target.value
            ;
            setPassword({value: password, valid:validarPassword(password)})
        }}
        />
        <Button variant="contained" type="submit">
          Siguiente
        </Button>
      </Box>
    );
  }


export default DatosUsuario;