useRefetchable result does not get updated even though the store does

const query = graphql`
  query UserQuery($id: ID!) {
    node(id: $id) {
      ... on User {
        ...UserFragment_user
      }
    }
  }
`;

const userFragment = graphql`
  fragment UserFragment_user on User
  @refetchable(queryName: "UserRefetchQuery") {
    email
    nickname
  }
`;

const Test: React.FC<{
  node: any
}> = ({ node }) => {
  const [result, refetch] = useRefetchable(userFragment, node);
  const environment = useRelayEnvironment();

  // ---> Here, the result still uses id: '23' instead of '24'
  console.log(result, environment.getStore().getSource().toJSON());
  return (
    <>
      <button onClick={() => refetch({ id: '24' }, { renderVariables: { id: '24' } })}>Refetch</button>
      {result && (<div>{result.email} {result.nickname}</div>)}
   </>
  );
};

const App: React.FC<{}> = () => {
  const { props } = useQuery(query, { id: '23' });

  return (
    <>
      {props && props.node && <Test node={props.node} />}
    </>
  );
};

When I call refetch, I can see it send a network request to my graphql endpoint and retrieve my updated result. If I console log my store, I can see the updated result there, but here in const [result, refetch] , the result is not updated. Any idea why is that?

relay-tools / relay-hooks

useRefetchable result does not get updated even though the store does #125