TextArea is wrong size initially (off by a hair), then it adjusts as you type?

I have a `` used with react-hook-form, and when it starts out, the textarea is slightly smaller than it should be. When I type, it fixes. What should I do to fix this? Is it the font that is throwing it off, or my CSS or something?

Here is a gif.


Here is a snippet of my code from a larger project:

```jsx
import TextareaAutosize from 'react-textarea-autosize'
import styles from './index.module.css'
import { Controller } from 'react-hook-form'

export default function TextField({
label,
placeholder,
type,
value,
inputId,
control,
prefix,
name,
minHeight,
...props
}) {
return (

)
}
```

And usage like this:

```jsx
function Details() {
const { handleSubmit, control } = useForm()

const onSubmit = (data) => {
console.log(data)
}

return (

Details

)
}
```

The CSS for the file is here:

```css
.field {
padding-bottom: 20px;
}

.label {
opacity: 0.7;
font-size: 14px;
}

.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}

.image {
width: 100px;
height: 100px;
background: #eee;
margin-right: 20px;
}

.imageContainer {
display: flex;
justify-content: space-between;
align-items: center;
}

.removeUploadButton {
display: flex;
cursor: pointer;
}

.addButton {
display: flex;
cursor: pointer;
}

.removeButton {
display: flex;
left: -6px;
cursor: pointer;
}

.inputContainer {
display: flex;
padding: 10px 20px;
margin: 10px 0px;
background: #eee;
width: 100%;
border-radius: 4px;
font-size: 22px;
}

.input {
flex: 1;
}

.input::placeholder, .inputPrefix {
color: #aaa;
}

.legend {
text-transform: uppercase;
font-size: 22px;
opacity: 0.7;
}

.imageContent {
display: flex;
align-items: center;
}

.button {
cursor: pointer;
padding: 10px 20px;
color: white;
background: #777;
border-radius: 4px;
text-align: center;
width: 200px;
}
```

Any ideas?