I am trying to create a generic onChange event function which can dynamically set the state based on the passed event.name property. Currently whenever I type something in the amount field it is taking it as a string. Is there a way to do this?

Sample code

const [formState, setFormState] = useState<{title: string, amount: number, date: Date}>({
        title: '',
        amount: 0.01,
        date: new Date(Date.now()),
    });

// should be able to handle the types I have declared
const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
 
        setFormState((prevState) => {
            return {
                ...prevState,
                [name]: value,
            }
        });
}

return (
        <form onSubmit={submitHandler}>
            <div className="new-expense__controls">
                <div className="new-expense__control">
                    <label>Title</label>
                    <input type="text" name="title" onChange={inputChangeHandler} value={formState.title}></input>
                </div>
                <div className="new-expense__control">
                    <label>Amount</label>
                    <input type="number" min="0.01" step="0.01" name="amount" onChange={inputChangeHandler} value={formState.amount}></input>
                </div>
                <div className="new-expense__control">
                    <label>Date</label>
                    <input type="date" min="2019-01-01" step="2022-12-31" name="date" onChange={inputChangeHandler} value={formState.date.toISOString().split('T')[0]}></input>
                </div>
            </div>
            <div className="new-expense__actions">
                <button type="submit">Add Expense</button>
            </div>
        </form>
    );