How to break text in Material UI TextField when width is too small for full lenght text

Question

I want to break text to lower line once TextField is too small for text length, it's to make responsive screen. When I add a style word-break:break-all it does not work, text is hidden outside the component.

<StyledInputSection>
                        <StyledDataHeader>
                            {personalDataTxt}
                        </StyledDataHeader>
                        <InputForm
                            name={'surname'}
                            id={'surname'}
                            label={surnameLabelTxt}
                            disabled={isDisabledInputs}
                            style={{ wordBreak: 'break-all' }}
                        />
                        <InputForm
                            name={'name'}
                            id={'name'}
                            label={nameLabelTxt}
                            disabled={isDisabledInputs}
                        />
                    </StyledInputSection>

Below is the InputForm

export const InputForm: FC<ExtendetPropsType> = (props) => {
const [field, meta] = useField<unknown>(props);

const errorText = meta.error && meta.touched ? meta.error : '';
return (
    <BaseInput
        {...props}
        {...field}
        color={props.color ?? 'secondary'}
        helperText={errorText}
        error={!!errorText}
    />
);

};

And BaseInput is TextField from Mui

import { TextField } from '@mui/material';
import { TextFieldBackgroundProps } from '../../textfield/text-field';
import { FC } from 'react';
import { makeStyles } from '@mui/styles';

const outlinedPadding = makeStyles({
    root: {
        '& label.MuiFormLabel-root': {
            backgroundColor: (
                props: React.PropsWithChildren<TextFieldBackgroundProps>
            ) => props.backgroundcolor ?? '#ffff',
            paddingRight: '5px',
            fontSize: '11px',
        },
    },
});

type PropsModelType = TextFieldBackgroundProps;
export const BaseInput: FC<PropsModelType> = (props) => {
    const classes = outlinedPadding(props);
    return (
        <TextField
            {...props}
            inputProps={{
                'aria-label':
                    props.inputProps?.['aria-label'] ?? (props.label as string),
                ...props.inputProps,
            }}
            fullWidth
            className={classes.root}
        />
    );
};

Appreciate Your support. I tried to google it but failed