How to set the yup validation on the renderer in react

Question

 {
        label: "Room",
        name: "room",
        type: "select",
        rule: yup.string().min(1, 'Room field must have at least 1 or more items').required('Room is a required field'),
        renderer: () => {
          const { control, register, errors } = useFormContext();

          return (
            <SelectPicker
              placeholder="Room"
              data={roomList}
              labelKey="name"
              valueKey="row"
              onChange={(value) => {
                control.setValue('room', value)
              }}
              value={control.getValues()['room']?.row}
            />
          )
        }

How to apply the yup validation on the selectpicker, cause after clicking the submit button it doesn't display the error message.

I tried to apply add this

validate={value => {
            if (!value) {
              return "Required";
            }
          }}

on the rsuite selectpicker