```js
  let foo = {}
  useEffect(() => {
    foo.bar.baz = 43;
  }, []);
```

This asks you to include `foo.bar.baz` into deps. But this doesn't make sense, as you write to it. Instead it should ask to include `foo.bar` into array.

If `foo` is a newly created object in render scope then we might additionally nudge you to `useRef` for it instead. Because otherwise it won't be shared between renders.
.sort()
              .map(name => "'" + name + "'"),
          ) +
          `. Either ${fixVerb} ${
            deps.size > 1 ? 'them' : 'it'
          } or remove the dependency array.`
        );
      }
      let extraWarning = '';
      if (unnecessaryDependencies.size > 0) {
        let badRef = null;
        Array.from(unnecessaryDependencies.keys()).forEach(key => {
          if (badRef !== null) {
            return;
          }
          if (key.endsWith('.current')) {
            badRef = key;
          }
        });
        if (badRef !== null) {
          extraWarning =
            ` Mutable values like '${badRef}' aren't valid dependencies ` +
            "because mutating them doesn't re-render the component.";
        } else if (externalDependencies.size > 0) {
          const dep = Array.from(externalDependencies)[0];
          
          
          if (!scope.set.has(dep)) {
            extraWarning =
              ` Outer scope values like '${dep}' aren't valid dependencies ` +