<!--
  Please provide a clear and concise description of what the bug is. Include
  screenshots if needed. Please test using the latest version of the relevant
  React packages to make sure your issue has not already been fixed.
-->

React version: 16.3.1
eslint-plugin-react-hooks version: 4.0.0

## Steps To Reproduce
Use ?. in dependency to any of the react hooks.
```
export default function App() {
    const x = Date.now() % 2 === 0 ? { test: true } : undefined;
  
    React.useEffect(() => {
      if (x?.test) {
        console.log('test');
      }
    }, [x?.test]);
  
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    );
  }
  
```
<!--
  Your bug will get fixed much faster if we can run your code and it doesn't
  have dependencies other than React. Issues without reproduction steps or
  code examples may be immediately closed as not actionable.
-->

Link to code example:
I was unable to reproduce the behavior in codesandbox, it must be transforming the code or stripping out the ? before linting. It happens in VS Code.

<!--
  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
  repository on GitHub, or provide a minimal code example that reproduces the
  problem. You may provide a screenshot of the application if you think it is
  relevant to your bug report. Here are some tips for providing a minimal
  example: https://stackoverflow.com/help/mcve.
-->

## The current behavior
eslint errors occur:
React Hook React.useEffect has a missing dependency: 'x'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps
React Hook React.useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked.eslintreact-hooks/exhaustive-deps
![image](https://user-images.githubusercontent.com/319334/81008656-25021f00-8e08-11ea-8f91-5c533671d75a.png)


## The expected behavior
I would expect it to work just like it does currently for non-optional child member access.
![image](https://user-images.githubusercontent.com/319334/81008703-36e3c200-8e08-11ea-8aa9-56df8ccf9531.png)
When ? is removed, it no longer shows eslint errors, but obviously would fail at runtime if x is undefined.
errors: [
        {
          message:
            `The 'handleNext' function makes the dependencies of ` +
            `useEffect Hook (at line 11) change on every render. ` +
            `To fix this, wrap the 'handleNext' definition into its own useCallback() Hook.`,
          
          
          suggestions: [
            {
              desc:
                "Wrap the 'handleNext' definition into its own useCallback() Hook.",
              output: normalizeIndent`
                function MyComponent(props) {
                  let [, setState] = useState();
                  const handleNext = useCallback((value) => {
                    setState(value);
                  });
                  useEffect(() => {
                    return Store.subscribe(handleNext);
                  }, [handleNext]);
                  return <div onClick={handleNext} />;
                }
              `,
            },
          ],
        },
      ],
    },
    {