How to use the bpk-component-calendar.withCalendarState function in bpk-component-calendar

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* @flow strict */

import {
  BpkCalendarGridHeader,
  withCalendarState,
  composeCalendar,
} from 'bpk-component-calendar';

import BpkscrollableCalendarDate from './BpkScrollableCalendarDate';
import BpkScrollableCalendarGridList from './BpkScrollableCalendarGridList';

export default withCalendarState(
  composeCalendar(
    null,
    BpkCalendarGridHeader,
    BpkScrollableCalendarGridList,
    BpkscrollableCalendarDate,
  ),
);

.add('Custon calendar component', () => {
    const CalendarWithColoredDates = withCalendarState(
      composeCalendar(
        BpkCalendarNav,
        BpkCalendarGridHeader,
        BpkCalendarGridWithTransition,
        ColoredCalendarDate,
      ),
    );

    return (
      <div id="application-element">
        </div>