Why Relay Modern Is Making New Requests, Instead Of Using Cache

I have a page where you can see the current Item and click "Next" to see the next one. Here is how this component looks like:

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      index: 0,
      ids: ["VXNlcjox", "VXNlcjoy"]
    };
    this.onNext = () => this.setState(s => ({ index: (s.index + 1) % 2 }));
  }

  render() {
    const { index, ids } = this.state;
    return (
      <div>
        <button type="button" onClick={this.onNext}>
          next
        </button>
        <QueryRenderer
          environment={environment}
          query={graphql`
            query App_Query($id: ID!) {
              node(id: $id) {
                id
              }
            }
          `}
          variables={{ id: ids[index] }}
          render={({ error, props }) => {
            if (error) {
              return <div>Error!</div>;
            }
            if (!props) {
              return <div>Loading...</div>;
            }
            return <pre>{JSON.stringify(props, null, 2)}</pre>;
          }}
        />
      </div>
    );
  }
}

What I expect, is that each Item will be fetched only when requested for the first time and later used from cache.

But what I see, is that the new request made in the network tab every time I click "next", even if this Item was requested before. If I open Relay DevTools - Items with this id is already in the store:

So why is the new request made every time? Isn't Relay Modern supposed to reuse previously cached data?

I don't think it's the way query renderer is meant to work by default.

You're probably looking for this relay-query-lookup-renderer