How to use the relay-hooks.useRelayEnvironment function in relay-hooks

export const Todo = (props: Props) => {
  const [isEditing, setIsEditing] = useState(false);

  const {disabled} = props;
  const environment = useRelayEnvironment();
  const user = useFragment(fragmentSpecUser, props.user);
  const todo = useFragment(fragmentSpecTodo, props.todo);

  console.log('renderer');

  const handleCompleteChange = (e: SyntheticEvent) => {
    const complete = e.currentTarget.checked;
    ChangeTodoStatusMutation.commit(environment, complete, todo, user);
  };

  const handleDestroyClick = () => removeTodo();
  const handleLabelDoubleClick = () => {
    if (!disabled) setIsEditing(true);
  };
  const handleTextInputCancel = () => setIsEditing(false);

const TodoList = (props: Props) => {
  console.log("props", props);

  const environment = useRelayEnvironment();
  const user = useFragment(TodoList_user, props.user);
  const { todos, completedCount, totalCount, userId } = user;
  const handleMarkAllChange = (e: SyntheticEvent) => {
    const complete = e.currentTarget.checked;

    if (todos) {
      MarkAllTodosMutation.commit(environment, complete, todos, user);
    }
  };

  const nodes: ReadonlyArray =
    todos && todos.edges
      ? todos.edges
          .filter(Boolean)
          .map((edge: any) => edge.node)
          .filter(Boolean)

const AppTodo = (props: Props) => {
  const environment = useRelayEnvironment();
  const [{user}, refetch] = useRefetch(fragmentSpec, props.query);

  if (!user) {
    return <div>;
  }

  const handleTextInputSave = (text: string) =&gt; {
    AddTodoMutation.commit(environment, text, user);
    return;
  };

  const hasTodos = user.totalCount &gt; 0;
  console.log('renderer');
  return (
    
      <header></header></div>

const useQueryOffline = function(
  gqlQuery: GraphQLTaggedNode,
  variables: TOperationType["variables"],
  options: {
    fetchPolicy?: FetchPolicy;
    networkCacheConfig?: CacheConfig;
    ttl?: number;
  } = {}
): OfflineRenderProps {
  const environment = useRelayEnvironment();
  const ref = useRef<{ rehydrated: boolean; error: Error; props: any }>({
    rehydrated: environment.isRehydrated(),
    error: null,
    props: null
  });

  const [, forceUpdate] = useState(null);

  const { rehydrated } = ref.current;

  if (!rehydrated) {
    environment
      .hydrate()
      .then(() => {
        const current = {
          ...ref.current,