Me desaparece la linea import Stepper

Mi linea import Stepper from "../Stepper"; me desaparece cuando guardo

import { Box, Stepper, Typography } from "@mui/material";
import React, { useState } from "react";
import Complete from "./Complete";
import DatosEntrega from "./DatosEntrega";
import DatosPersonales from "./DatosPersonales";
import DatosUsuario from "./DatosUsuario";
import { FormSpace, Img, LogoSpace } from "./styles";
import Stepper from "../Stepper";
const Form = () => {
  const [step, setStep] = useState(0);

  //step = 0  --> nos muestre <DatosUsuario />
  //step = 1 --> <DatosPersonales/>
  //step = 2 --> <DatosEntrega/>
  // step = 3 --> <Complete/>



const steps = {
     0: <DatosUsuario />,
     1: <DatosPersonales />,
     2:<DatosEntrega />,
     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;

no veo un error en el codigo

import { Box, Step, StepLabel, Stepper } from "@mui/material";
import React from "react";

const StepperComponent = (props) => {

  const steps = ["Datos de usuario", "Datos personales", "Datos de entrega"];

  return (
    <Box sx={{ width: "100%" }}>
      <Stepper activeStep={props.step}>
        {steps.map((step) => (
          <Step key={step}>
            <StepLabel>{step}</StepLabel>
          </Step>
        ))}
      </Stepper>
    </Box>
  );
};

export default StepperComponent;

tampoco en la carpeta Stepper, la verdad que no se que puede ser