STFWrap.tsx

import { Divider, Paper, Stack, Typography } from "@mui/material";
import { motion } from "framer-motion";
import { useState } from "react";
import StyledTextField from "./StyledTextField";

const STFWrap = (props: Parameters<typeof StyledTextField>[0]) => {
    const [focused, setFocused] = useState<boolean>(false);
    const [inputValue, setInputValue] = useState<string>("");

    return (
        <motion.div
            initial={{ 'maxWidth': '250px', 'width': '100%', }}
            animate={{ 'maxWidth': focused ? '275px' : '250px', }}
        >
            <StyledTextField
                {...props}
                fullWidth
                onFocus={() => setFocused(true)}
                onBlur={() => setFocused(false)}
                onChange={(event) => {
                    setInputValue(event.target.value)
                    if (props.onChange) props.onChange(event);
                }}
                inputProps={{
                    style: {
                        paddingBottom: focused ? '16.5px' : '8px',
                        paddingTop: focused ? '16.5px' : '8px',
                        transition: 'all 0.2s 0s ease'
                    },
                }}
                InputLabelProps={{
                    style: {
                        transform: focused || inputValue !== "" ? '' : 'translate(14px, 8px) scale(1)',
                    },
                }}
            />
        </motion.div>
    );
}

StyledTextField.tsx

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

const StyledTextField: React.FC<TextFieldProps> = (props) => (
    <TextField
        variant="outlined"
        inputProps={{ style: { paddingTop: '8px', paddingBottom: '8px', } }}
        {...props}
    />
);

export default StyledTextField;