SingleDatePicker by react-dates is not closing on change

Question

Hey I have set up a react dates functionality on my app, however the date, when chosen doesnt make the calendar close.

I have the example here on https://codesandbox.io/s/magical-dubinsky-xuxkj?file=/src/App.js:0-681

import React, { useState } from "react";
import { SingleDatePicker } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";

const CreateGroupEvent = (props) => {
  const [dob, setDob] = useState(null);
  const [focused, setFocused] = useState(false);
  const setDate = (date) => {
    setDob(date);
    setFocused(false);
  };

  return (
    <>
      <SingleDatePicker
        date={dob}
        // {...input}
        onOutsideClick={true}
        numberOfMonths={1}
        onDateChange={setDate}
        focused={focused}
        onFocusChange={setFocused}
        id="dob"
      />
    </>
  );
};

export default CreateGroupEvent;

Answer 1

** EDITED : Here is my example code sandbox.

How about trying this?

According to its document, onFocusChange seems to should take { focused : boolean } objects as parameters.

const onFocusChange = ({ focused }) => {
  setFocused(focused);
};

<SingleDatePicker
    date={dob}
    onOutsideClick={true}
    numberOfMonths={1}
    onDateChange={setDate}
    focused={focused}
    onFocusChange={onFocusChange}
    id="dob"
  />

Answer 2

This seems to be a version related quirk -- if you just do:

onFocusChange={(focusedInput)=> setFocused(focusedInput.focus)}

it'll work.