<!--
  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: 17.0.0-rc.1

## Steps To Reproduce

1. Create elements out of `lazy` components, use them conditionally.
2. Check if the `lazy` components are dynamically imported.

<!--
  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: --

`main.jsx`:
```jsx
import React, { lazy, Suspense, useState } from 'react';
import { render } from 'react-dom';

const Checked = lazy(() => import('./Checked'));
const Checked2 = lazy(() => import('./Checked2'));
const Unchecked = lazy(() => import('./Unchecked'));
const Unchecked2 = lazy(() => import('./Unchecked2'));

function App() {
  const [checked, setChecked] = useState(false);

  const checkedElement = <Checked />;
  const uncheckedElement = <Unchecked />;

  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={e => setChecked(e.target.checked)}
        />
        Toggle me
      </label>

      <hr />

      <Suspense fallback="loading...">
        Checked? {checked ? checkedElement : uncheckedElement}
      </Suspense>

      <hr />

      <Suspense fallback="loading...">
        Checked? {checked ? <Checked2 /> : <Unchecked2 />}
      </Suspense>
    </>
  );
}

render(<App />, document.getElementById('app'));
```
`Checked.jsx`:
```jsx
export default function() {
  return 'Checked';
}
```
`Checked2.jsx`:
```jsx
export default function() {
  return 'Checked 2';
}
```
`Unchecked.jsx`:
```jsx
export default function() {
  return 'Unchecked';
}
```
`Unchecked2.jsx`:
```jsx
export default function() {
  return 'Unchecked 2';
}
```

<!--
  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
The `Checked.jsx` chunk is imported eagerly, even though the component isn't immediately rendered.
![image](https://user-images.githubusercontent.com/567105/91972475-b039e580-ed12-11ea-96a4-8c7dc6ee5388.png)

This doesn't happen in prod mode, or with React 16, or with components that are not `createElement`-ed eagerly.

This affects react-router, as it uses this pattern:
```jsx
<Router>
  <Suspense fallback={<Loading />}>
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route exact path="/demo">
        <Demo />
      </Route>
      <Route>
        <NotFound />
      </Route>
    </Switch>
  </Suspense>
</Router>
```

AFAICT it doesn't break anything, but it is unexpected/confusing.

## The expected behavior
`lazy` components that are not rendered should not be dynamically imported.
? ' Did you wrap a component in React.lazy() more than once?'
          : ''),
    );
  });
  it('warns about defining propTypes on the outer wrapper', () => {
    const LazyText = lazy(() => fakeImport(Text));
    expect(() => {
      LazyText.propTypes = {hello: () => {}};
    }).toErrorDev(
      'React.lazy(...): It is not supported to assign `propTypes` to ' +
        'a lazy component import. Either specify them where the component ' +
        'is defined, or create a wrapping component around it.',
      {withoutStack: true},
    );
  });
  async function verifyInnerPropTypesAreChecked(Add) {
    const LazyAdd = lazy(() => fakeImport(Add));
    expect(() => {
      LazyAdd.propTypes = {};
    }).toErrorDev(
      'React.lazy(...): It is not supported to assign `propTypes` to ' +
        'a lazy component import. Either specify them where the component ' +
        'is defined, or create a wrapping component around it.',
      {withoutStack: true},
    );
    const root = ReactTestRenderer.create(
      <Suspense fallback={<Text text="Loading..." />}>
        <LazyAdd inner="2" outer="2" />
      </Suspense>,
      {