How to use the react-apollo.useSubscription function in react-apollo

function Messages() {
  const [messages, setMessages] = useState([]);
  const onSubscriptionData = useCallback(
    (result: OnSubscriptionDataOptions) => {
      if (result.subscriptionData.data != null) {
        setMessages(state => [
          ...state,
          result.subscriptionData.data.messageFeed,
        ]);
      }
    },
    [],
  );
  const listRef = useRef(null);

  useSubscription(messageFeedSubscription, { onSubscriptionData });

  useEffect(() => {
    // scroll down
    if (listRef.current != null) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    }
  });

  return (
    
      {messages.map((message, i) => (
        
      ))}
    
  );
}

const ProbeScienceSub = props => {
  const {simulatorId, emit, detect} = props;
  const {data = {}, loading} = useSubscription(PROBE_SCIENCE_EMITTER_SUB, {
    variables: {simulatorId},
  });
  const {scienceProbeEmitter: {name, type, charge} = {}} = data;
  React.useEffect(() => {
    if (!loading) {
      if (type === "burst") {
        emit(charge);
      } else {
        detect(charge, name);
      }
    }
  }, [loading, name, type, charge, emit, detect]);

  return null;
};

const RefetchOnMessageData = ({ refetch }) => {
  const callback = useCallback(() => {
    try {
      refetch()
    } catch (e) {
      console.error('failed to refetch', e)
    }
  })

  useSubscription(NewMessageSubscription, {
    onSubscriptionData: callback
  })

  useSubscription(MarkedAsReadSubscription, {
    onSubscriptionData: callback
  })

  useSubscription(MessagingStatusChangeSubscription, {
    onSubscriptionData: callback
  })

  return null
}

try {
      refetch()
    } catch (e) {
      console.error('failed to refetch', e)
    }
  })

  useSubscription(NewMessageSubscription, {
    onSubscriptionData: callback
  })

  useSubscription(MarkedAsReadSubscription, {
    onSubscriptionData: callback
  })

  useSubscription(MessagingStatusChangeSubscription, {
    onSubscriptionData: callback
  })

  return null
}

const RefetchOnMessageData = ({ refetch }) => {
  const callback = useCallback(() => {
    try {
      refetch()
    } catch (e) {
      console.error('failed to refetch', e)
    }
  })

  useSubscription(NewMessageSubscription, {
    onSubscriptionData: callback
  })

  useSubscription(MarkedAsReadSubscription, {
    onSubscriptionData: callback
  })

  useSubscription(MessagingStatusChangeSubscription, {
    onSubscriptionData: callback
  })

  return null
}

const useDraftSubscription = (client, datasetId) => {
  useSubscription(DRAFT_SUBSCRIPTION, {
    variables: { datasetIds: [datasetId] },
    shouldResubscribe: true,
  })
  console.log('GET subscription update')
}

const EnableMessagingModal = () => {
  const [waitForSignature, setWaitForSign] = useState(false)

  const { data, error, networkStatus, refetch } = useQuery(query, {
    notifyOnNetworkStatusChange: true
  })

  useSubscription(MessagingStatusChangeSubscription, {
    onSubscriptionData: () => networkStatus !== 1 && refetch()
  })

  if (networkStatus === 1) {
    return 
  } else if (error) {
    return <p>Error :(</p>
  } else if (!data || !data.web3) {
    return <p>No Web3</p>
  }

  if (!data.messaging) {
    return 
  } else if (!data.messaging.synced) {
    return 
  } else if (!data.messaging.enabled &amp;&amp; !waitForSignature) {

const CrmData = props => {
  const {simulator} = props;
  const {data, loading} = useQuery(CRM_MOVEMENT_QUERY, {
    variables: {simulatorId: simulator.id},
  });
  const {data: subData} = useSubscription(CRM_MOVEMENT_SUBSCRIPTION, {
    variables: {simulatorId: simulator.id},
  });
  if (loading || !data) return null;
  const crm = subData ? subData.crmMovementUpdate : data.crm;
  return ;
};

() => ({
      variables: {simulatorId: simulator.id, station: station.name},
      updateQuery: (previousResult, {subscriptionData}) => {
        if (!subscriptionData.data.sendMessage) return previousResult;
        setTimeout(scrollElement, 100);
        return Object.assign({}, previousResult, {
          messages: previousResult.messages.concat(
            subscriptionData.data.sendMessage,
          ),
        });
      },
    }),
    [simulator.id, station.name],
  );
  useSubscribeToMore(subscribeToMore, MESSAGING_SUB, config);
  const {data: teamsSub} = useSubscription(MESSAGING_TEAMS_SUB, {
    variables: {simulatorId: simulator.id},
  });

  if (loading) return null;
  const {messages} = data;
  const teams = teamsSub ? teamsSub.teamsUpdate : data.teams;

  const messageGroups = station.messageGroups;
  const convoObj = messages
    .filter(
      m =>
        !teams.find(
          t =>
            t.cleared === true &&
            (t.name === m.sender || t.name === m.destination),
        ),