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">
      <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;