temp/src/Components/TextInputField.jsx

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

const TextInputField = React.forwardRef(
  ({ placeholder, value, setValue, onKeyDown }, ref) => {
    return (
      <Box className="d-flex flex-column py-3">
        <label htmlFor="limit-input" className="text-left">
          {placeholder} :-
        </label>
        <TextField
          className="rounded h6 bg-white"
          type="text"
          placeholder={placeholder}
          id="limit-input"
          autoComplete="off"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={onKeyDown}
          inputRef={ref}
        />
      </Box>
    );
  }
);

export default TextInputField;