Placeholder width not respected until element focused

[msdrigg]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-Date-Picker version
• [X] I have checked if this bug is not already reported

Description

When I have a placeholder that is bigger than the initial placeholder value, it doesn't get updated until it is focused. It appears crampped until I focus it.

For example, my year placeholder is yyyy

Appearance after page load:

Appearance after focusing on it:

Steps to reproduce

1. Create a datepicker
2. Set the year placeholder to "long placeholder"
3. Load the component in a page
4. Notice how the placeholder doesn't fit within the input box
5. Focus on the input box (click on it)
6. Notice how the input only now resizes to fit the input

Expected behavior

The input width will adjust itself upon creation to fit the placeholder

Actual behavior

The input width does not adjust itself upon creation to fit the placeholder. It only adjusts itself after the input has been focused

Additional information

No response

Environment

• Firefox (latest):
• Date picker version: 8.4.0 (latest):
• React version: 18.1.0: