如何正确地将graphql突变推送到组件的道具中？

import React from 'react';
import { ApolloProvider, useMutation } from '@apollo/client';
import { gql } from 'graphql-tag';

// 定义突变
const ADD_TODO = gql`
  mutation AddTodo($text: String!) {
    addTodo(text: $text) {
      id
      text
    }
  }
`;

// 父组件
const ParentComponent = () => {
  const [addTodo] = useMutation(ADD_TODO);

  const handleAddTodo = async (text) => {
    try {
      const { data } = await addTodo({
        variables: { text },
      });
      // 突变成功后，将结果作为道具传递给子组件
      return data.addTodo;
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <ChildComponent handleAddTodo={handleAddTodo} />
  );
};

// 子组件
const ChildComponent = ({ handleAddTodo }) => {
  const handleButtonClick = () => {
    const todo = 'New Todo';
    // 调用父组件的处理函数来执行突变
    const result = handleAddTodo(todo);
    console.log(result);
  };

  return (
    <button onClick={handleButtonClick}>Add Todo</button>
  );
};

// 在根组件中使用ApolloProvider来提供GraphQL客户端
const App = () => {
  return (
    <ApolloProvider client={yourApolloClient}>
      <ParentComponent />
    </ApolloProvider>
  );
};