Bug: eslint(react-hooks/exhaustive-deps) When a property is accessed with and without optional chaining, exhaustive-deps' code suggestion will introduce an error

## Steps To Reproduce [StackBlitz demo](https://stackblitz.com/edit/node-v1wayx?devtoolsheight=33&file=index.js) I've enabled `enableDangerousAutofixThisMayCauseInfiniteLoops` so you can run `npx eslint --fix index.js` and see the change that react-hooks/exhaustive-deps makes through the code suggestions API. ## The current behavior When you accept react-hooks/exhaustive-deps' code suggestions the following code: ```js import { useState, useEffect } from 'react'; export function MyComponent() { const [one] = useState(1); const [foo] = useState(undefined); useEffect(() => { console.log(one); if (foo?.bar) { console.log(foo.bar); } }, [one]); useEffect(() => { console.log(one); if (foo?.bar) { console.log(foo.bar); } }, [foo?.bar]); return null; } ``` Will be incorrectly fixed to the following. ```js import { useState, useEffect } from 'react'; export function MyComponent() { const [one] = useState(1); const [foo] = useState(undefined); useEffect(() => { console.log(one); if (foo?.bar) { console.log(foo.bar); } }, [foo.bar, one]); useEffect(() => { console.log(one); if (foo?.bar) { console.log(foo.bar); } }, [foo.bar, one]); return null; } ``` ## The expected behavior react-hooks/exhaustive-deps should be recommending the following: ```js import { useState, useEffect } from 'react'; export function MyComponent() { const [one] = useState(1); const [foo] = useState(undefined); useEffect(() => { console.log(one); if (foo?.bar) { console.log(foo.bar); } }, [foo?.bar, one]); useEffect(() => { console.log(one); if (foo?.bar) { console.log(foo.bar); } }, [foo?.bar, one]); return null; } ``` ## Additional details When you include both an optional chaining usage `foo?.bar` and a non-optional chaining usage `foo.bar` exhaustive-deps will use the version without the optional chaining for the deps array. i.e. It will recommend a de…