리액트 Autocomplete 컴포넌트 Uncaught TypeError: Cannot read property 'length' of undefined

리액트 Autocomplete 컴포넌트 사용 중 아래와 같은 에러가 발생했습니다.

Uncaught TypeError: Cannot read property 'length' of undefined
    at useAutocomplete (useAutocomplete.js:301)
    at Autocomplete (Autocomplete.js:367)
    at renderWithHooks (react-dom.development.js:16260)
    at updateForwardRef (react-dom.development.js:18143)
    at beginWork$1 (react-dom.development.js:20211)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at react-dom.development.js:12199
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
    at flushSyncCallbackQueue (react-dom.development.js:12182)
    at discreteUpdates$1 (react-dom.development.js:24423)
    at discreteUpdates (react-dom.development.js:1438)
    at dispatchDiscreteEvent (react-dom.development.js:5881)

index.js:1 The above error occurred in the <ForwardRef(Autocomplete)> component:
    in ForwardRef(Autocomplete) (created by WithStyles(ForwardRef(Autocomplete)))
    in WithStyles(ForwardRef(Autocomplete)) (at xxx.js:450)
    in form (at xxx.js:382)
    in div (at xxx.js:381)
    in div (at xxx.js:375)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at xxx.js:369)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at xxx.js:365)
    in div (at xxx.js:361)
    in xxx (created by Context.Consumer)
    in Route (at xxx/index.js:17)
    in Switch (at xxx/index.js:14)
    in xxxRouter (at Auth/index.js:14)
    in Route (at Auth/index.js:7)
    in Auth (at App.js:80)
    in Switch (at App.js:79)
    in Router (created by HashRouter)
    in HashRouter (at App.js:78)
    in App (at src/index.js:8)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Autocomplete 컴포넌트를 처음 사용했을 때는 에러가 발생하지 않았고, 한번 처리 후 다시 서버로 요청 후 받은 결과를 처리하면서 from의 value 들을 null로 세팅 후 다시 시도시 발생했습니다.

원인은 간단했습니다. options를 2차원 배열을 참고하라고 했는데 valueX만 체크를 했었네요 . valueY도 체크해서 options를 세팅해줬습니다.

확인해보니 에러 전에 이미 경고가 발생하고 있었습니다.

Warning: Failed prop type: The prop `options` is marked as required in `ForwardRef(Autocomplete)`, but its value is `undefined`.
    in ForwardRef(Autocomplete) (created by WithStyles(ForwardRef(Autocomplete)))
    in WithStyles(ForwardRef(Autocomplete)) (at xxx.js:450)
    in form (at xxx.js:382)
    in div (at xxx.js:381)
    in div (at xxx.js:375)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at xxx.js:369)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at xxx.js:365)
    in div (at xxx.js:361)
    in xxx (created by Context.Consumer)
    in Route (at xxx/index.js:15)
    in Switch (at xxx/index.js:14)
    in xRouter (at Auth/index.js:14)
    in Route (at Auth/index.js:7)
    in Auth (at App.js:88)
    in Switch (at App.js:79)
    in Router (created by HashRouter)
    in HashRouter (at App.js:78)
    in App (at src/index.js:8)

위 에러와 비슷하게 만약 아래와 같은 에러도 options에 설정할 녀석들이 null이나 undefined인지 체크하면 될 듯합니다.

Warning: Failed prop type: The prop `options` is marked as required in `ForwardRef(Autocomplete)`, but its value is `null`.

Uncaught TypeError: Cannot read property 'filter' of null

    at useAutocomplete (useAutocomplete.js:284)