When selecting the year of birth and typing it instead of using the date picker a user can get away with typing long strings of numbers such as "2495753" or years such as "0004" and "0123" or "2953" and so on.

//PersonalInformation.tsx
type PersonalInformationData = {
    dateOfBirth: string;
};

type PersonalInformationProps = {
    data: PersonalInformationData;
    handleChange: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>;
};

 return (
{/* Date of Birth */}
<div className="mb-4">
    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="dob">
        Date of Birth (DD/MM/YYYY)
    </label>
    <div className="relative rounded-md bg-[var(--input-field)]"
        <input
            id="dob"
            className="w-full pl-4 pr-4 bg-transparent text-white placeholder-gray-400 focus:outline-none rounded-md"
            type="date"
            name="dateOfBirth"
            min="1900-01-01"
            max={`${new Date().getFullYear()}-12-31`}
            placeholder="DD/MM/YYYY"
            value={data.dateOfBirth}
            onChange={handleChange}
            required
        />
    </div>
</div>

//signup.tsx
import PersonalInformation from './PersonalInformation';

    const [formData, setFormData] = useState({
        dateOfBirth: '',
    });

const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = event.target;
    
        if (name === "dateOfBirth") {
            const dateParts = value.split('-');
            const year = parseInt(dateParts[0]);
    
            const currentYear = new Date().getFullYear();
            if (!year || year < 1900 || year > currentYear) {
                const resetDate = `${currentYear}-${dateParts[1] || '01'}-${dateParts[2] || '01'}`;
                setFormData({ ...formData, [name]: resetDate });
                return;
            }
        }
        setFormData({ ...formData, [name]: value });
    };