React datpicker in React-Hook-Form - error persists when setting Controller to required

Question

I have a react-hook-form that contains the react-datpicker in a Controller. Everything works fine except that I realized I needed to require a start date and end date. I saw that you can set the rules to required and get an error message. Problem is the error message appears even if I have the input field filled out. What am I doing wrong? Here I the code.

 <Controller
            control={control}
            name='EndDate'
            rules={{ required: true }}
            render={({ field: { onChange, onBlur, value, ref } }) => (
              <DatePicker
                onChange={(val) => {
                  setEndDateTime(val);
                  setValue("end", val);
                }}
                onBlur={onBlur}
                className='formDate'
                selected={endDateTime}
                showTimeSelect
                timeIntervals={15}
                timeCaption='time'
                dateFormat='MM-dd-yyyy h:mm'
              />
            )}
          />
            {errors.EndDate && (
            <ErrorDiv>
              <Err>Please enter an end date and time</Err>
            </ErrorDiv>
          )}