temp/src/Components/BookletInput.jsx

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

const BookletInput = ({ setBookletInput, setDataFetched, bookletInput }) => {
  return (
    <Box
      //   component="form"
      //   sx={{
      //     '& > :not(style)': { m: 1, width: '25ch' },
      //   }}
      //   noValidate
      className="w-100"
      autoComplete="off"
    >
      <TextField
        id="outlined-basic"
        label="Booklet Serial No"
        variant="outlined"
        className="w-100"
        autoComplete="off"
        value={bookletInput}
        onChange={(e) => {
          setBookletInput(e.target.value);
          setDataFetched(false);
        }}
      />
    </Box>
  );
};

export default BookletInput;