Ref not updating when conditionally applied

Bug Report

Describe the Bug

A clear and concise description of what the bug is.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Conditionally apply the ref
2. Scroll to bottom
3. Observe no callbacks fired and no entry exists

CodeSandbox Link

https://codesandbox.io/s/react-cool-inviewissues493-yks98

Expected Behavior

I would expect the observer to fire callbacks

Screenshots

Your Environment

• Device: MacBook Pro
• OS: macOS X
• Browser: Chrome
• Version: 1.2.2

Additional Information

Seems to be an issue when ref is conditionally set.

{hasNextPage && <div ref={triggerRef}>Loading...</div>}

{items.map((item, i) => {
	  return i === items.length - 1 ? (
	    <div ref={lastItemRef} key={item.id}>
	      {item.id}
	    </div>
	  ) : (
	    <div key={item.id}>{item.id}</div>
	  );
})}

[wellyshen]

@stramel Thank you for your support, I think this issue should be fixed in the latest version. BTW, I found you might forget to de-structure the created items from the demo code.

async onEnter({ observe, unobserve }) {
    unobserve();

    await new Promise((res) => {
      // Simulating data coming in from API
      setTimeout(() => {
-       setItems([...items, createItems()]);
+       setItems([...items, ...createItems()]);
        res();
      }, 200);
    });
    observe();
  }

[stramel]

@wellyshen No worries! I appreciate your time on these bugs. It will be very beneficial as we start to use this in our projects at my company!