ERROR JSX

Al finalizar el video y revisar me da el siguiente error y no entiendo porque me genera el error si el codigo esta bien, agradezco si hay una solucion

![]()

codigo:

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


const Step = ( { data, step } ) => {
    const {inputs, buttonText, onSubmit} = data
 
    return (
      <Box
        component="form"
        autocomplete="off"
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
        }}
        onSubmit= { onSubmit }
    >
        {
          inputs.map( ( input, i ) => {
            const { label, type, value,valid, onChange, helperText, validator } = input
            return (
          <TextField
          key={i}
          label={label}
          variant="outlined"
          fullWidth
          margin="dense"
          type={type}
          error={valid === false}
          helperText=
          {valid  === false &&  {helperText} }
          value={ value}
          onChange={ onChange }
        />

            )
          } )
        }

        <Button variant="contained" type="submit">
          {buttonText}
        </Button>
      </Box>
    );
  
}

export default Step;