Can't update the store via a subscription because ConnectionHandler.getConnection always returns undefined

Question

I I'm desperately trying to access the connection to update the store through a subscription. I try to follow the v11 doc of Relay to update Connections. I also specify that I followed the specifications of the relay to mount the server.

Here is my (simplified) graphQL schema :

type Query {
  node(
    id: ID!
  ): Node
  viewer: User
}

type User implements Node {
  id: ID!
  email: String
  searchCompanies(
    after: String
    first: Int
    before: String
    last: Int
  ): CompanyConnection

type CompanyConnection {
  pageInfo: PageInfo!
  edges: [CompanyEdge]
}

type CompanyEdge {
  node: Company
  cursor: String!
}

type Company implements Node {
  id: ID!
  usageName: String
  createdAt: String
}

Here is the component responsible to make the query and update the store with the subscription :

import React from 'react';
import { graphql } from 'babel-plugin-relay/macro';
import { useQuery } from 'relay-hooks';
import CompanyTable from './CompanyTable';

import { SearchCompanyQuery } from './__generated__/SearchCompanyQuery.graphql';

import {
  RecordSourceSelectorProxy,
  ROOT_ID,
  ConnectionHandler
} from 'relay-runtime';
import { useSubscription } from 'react-relay';

const query = graphql`
  query SearchCompanyQuery(
    $count: Int!
    $cursor: String
  ) {
    viewer {
      id
      email
      ...CompanyTable_viewer
        @arguments(
          count: $count
          cursor: $cursor
        )
    }
  }
`;
const subscription = graphql`
  subscription SearchCompanyQuerySubscription {
    companyInserted {
      id
      usageName
    }
  }
`;
const subscriptionConfig = {
  variables: {},
  subscription,
  onCompleted: () => console.log('Subscription established.'),
  onNext: () => {},
  onerror: () => {},
  updater: (store: RecordSourceSelectorProxy) => {
    const rootRecordProxy = store.get(ROOT_ID); // I can access it
    const viewerRecordProxy = store.getRoot().getLinkedRecord('viewer'); // I can access it too

    const connectionRecordA = ConnectionHandler.getConnection(
      rootRecordProxy,
      'CompanyTable_viewer_searchCompanies',
    );

    const connectionRecordB = ConnectionHandler.getConnection(
      viewerRecordProxy,
      'CompanyTable_viewer_searchCompanies',
    );

    console.log(connectionRecordA) // undefined
    console.log(connectionRecordB) // undefined
  }
};

export default function SearchCompany() {
  const { data, error } = useQuery<SearchCompanyQuery>(query, {
    count = 10,
    cursor: null,

  });

  useSubscription(subscriptionConfig);

  if (!data) {
    // return something;
  }

  if (error) {
    // return something;
  }

  return <CompanyTable data={data} />;
}

Finally here is my component responsible to display the data.

import {
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography
} from '@material-ui/core';

import React from 'react';
import { graphql } from 'babel-plugin-relay/macro';
import { usePaginationFragment } from 'react-relay';

import CompanyTableRow from './CompanyTableRow';

import {
  SearchCompanyQuery,
  SearchCompanyQueryResponse
} from './__generated__/SearchCompanyQuery.graphql';
import { CompanyTable_viewer$key } from './__generated__/CompanyTable_viewer.graphql';

type CompanyTableProps = {
  data: SearchCompanyQueryResponse;
};

const companyTableSpec = graphql`
  fragment CompanyTable_viewer on User
  @argumentDefinitions(
    count: { type: "Int", defaultValue: 10 }
    cursor: { type: "String" }
  )
  @refetchable(queryName: "CompanyTablePaginationQuery") {
    searchCompanies(
      after: $cursor
      first: $count
    ) @connection(key: "CompanyTable_viewer_searchCompanies") {
      edges {
        node {
          ...CompanyTableRow_companyTableRow
        }
      }
      pageInfo {
        endCursor
        hasNextPage
        hasPreviousPage
        startCursor
      }
    }
  }
`;

export default function CompanyTable({ data }: CompanyTableProps) {
  const { data: fragmentData, loadNext } = usePaginationFragment<
    SearchCompanyQuery,
    CompanyTable_viewer$key
  >(companyTableSpec, data.viewer);

  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>
              <Typography>
                Company Name
              </Typography>
            </TableCell>
            <TableCell>
              <Typography>
                Created at
              </Typography>
            </TableCell>
            <TableCell>
              <Typography>
                Action
              </Typography>
          </TableRow>
        </TableHead>
        <TableBody>
          {(fragmentData?.searchCompanies?.edges ?? []).map((edge: any) => (
            <CompanyTableRow
              key={edge.node.id}
              companyTableRow={edge.node}
            />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );

}