Not working as expected after wrapping up in Formik Field

[cmmash]

My issues:

• AM/PM not displaying.
• clear button doesn't work in sample
• onChange keeps throws an ugly error:

Uncaught TypeError: Cannot read property '0' of null
    at TimeInput.get (TimeInput.js:459)
    at TimeInput.js:177
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)
    at executeDispatchesAndRelease (react-dom.development.js:680)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
get @ TimeInput.js:459
(anonymous) @ TimeInput.js:177
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4826
batchedUpdates$1 @ react-dom.development.js:20393
batchedUpdates @ react-dom.development.js:2151
dispatchEvent @ react-dom.development.js:4905
(anonymous) @ react-dom.development.js:20444
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:20443
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882

Here's how I've implemented it in my React app:

import React, { Component } from 'react';
import TimeRangePicker from '@wojtekmaj/react-timerange-picker';

import './Sample.less';

const now = new Date();
const nextHour = new Date();
nextHour.setHours(nextHour.getHours() + 1);

export default class Sample extends Component {
  state = {
    value: [now, nextHour],
  }

  onChange = value => this.setState({ value })

  render() {
    const { value } = this.state;

    return (
      <div className="Sample">
        <header>
          <h1>react-timerange-picker sample page</h1>
        </header>
        <div className="Sample__container">
          <main className="Sample__container__content">
            <TimeRangePicker
              maxDetail="hour"
              onChange={this.onChange}
              value={value}
            />
          </main>
        </div>
      </div>
    );
  }
}

Where the heck am I going wrong?
I've removed all formield setFieldValue logic even.. Even after that, I simply can't get the hour ranges.
The onChange results in alerts that come as "New range: ,"

You can even check out this sandbox app for the first problem: https://codesandbox.io/s/yp701xxkw9

[cmmash]

Apparently, the second and third problems occurs when maxDetail is set to hour.
Weirdly, the clear button clears the from hour but not the to hour.

[wojtekmaj]

AM/PM not displaying.

That depends on your locale. Since you did not specify it, it's resolved automatically from your browser's settings. I need to know what locale are you using, because my default locale does not use AM/PM and "en-US" locale displays AM/PM just fine in your example.

clear button doesn't work in sample

onChange keeps throws an ugly error

These to are also likely caused by something wrong with your specific locale.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.