Line break in react text area being treated as space wrongly and can be removed with trim()

I have a text area like below which I try to remove the leading and trailing spaces of the string but I want to include the number of new line charactor in the string.

const [textValue, setTextValue] = useState('')

const onChangeValue= ({target: {value}}) => {
    console.log(value.length);
    console.log(value.trim().length);
    console.log(value.replace(/^\s+|\s+$/g, '').length);
    setTextValue(value);
};

<textarea
     onChange={onChangeValue}
     noAutoResize
     width={'100%'}
     height={'15em'}
     value={textValue}
     maxLength={maxLength}
/>

If I keep pressing the enter button on the textArea to add line breaks, the value.length keep increasing but value.trim().length always remains in 0.

According to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim, the trim() method removes whitespace only

Why it it also remove my line break? Even using regex it has the same behavior. it seems the state is storing a space instead.

Is there any way to achieve such requirement?

Whitespace is defined as white space characters plus line terminators

More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

your case should use regexp:

function trimSpace(str) {
  return str.replace(/^[ \t]+|[ \t]+$/g, '')
}

and call

const onChangeValue= ({target: {value}}) => {
    console.log(value.length);
    console.log(trimSpace(value));
    setTextValue(value);
};