ReactのstateをApollo Clientのcacheに置き換えようとしています。

useStateを使ってcurrentTargetを保存する処理をApollo Clientで置き換えようとしたところ、エラーが出力され、実行できません。

なお、保存したcurrentTargetはmaterial-uiのMenuのanchorElに設定して使う想定です。
https://material-ui.com/api/menu/

正しくcurrentTargetをcacheに格納する方法か代替案を教えてください。

以下のコードを実行すると、

(App.js)

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

function App() {

    const setElementMutation = gql`mutation
        SetElement($el: Element) {
            setElement(el: $el) @client
        }
    `;

    const [setElement] = useMutation(setElementMutation);

    const onClickHandler = (e) => {
        setElement({variables: {el: e.currentTarget}})
    }

    return (
        <input type="button" value="SEND" onClick={onClickHandler}/>
    );
}

export default App;

(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from '@apollo/react-hooks'

const resolvers = {
    Mutation: {
      setElement: (_, v, { cache }) => {
        const data = {
            el: v.el
        }
        cache.writeData({ data })
        return null;

      }
    }
}

const client = new ApolloClient({
    cache: new InMemoryCache(),
    resolvers: resolvers
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>,
    document.getElementById('root')
);

serviceWorker.unregister();

以下のエラーが出力されます。

bundle.esm.js:76 Uncaught (in promise) Error: Network error: Maximum call stack size exceeded
    at new ApolloError (bundle.esm.js:76)
    at Object.error (bundle.esm.js:1313)
    at notifySubscription (Observable.js:157)
    at onNotify (Observable.js:196)
    at SubscriptionObserver.error (Observable.js:253)
    at bundle.esm.js:1126

backend.js:1 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLInputElement'
    |     property '__reactInternalInstance$cubckm44auj' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at Object.stringify (<anonymous>)
    at u (backend.js:1)

（おそらくcurrentTargetが循環参照になっており、currentTargetをJSON形式でリゾルバにうまく渡せていないか、cacheに書き込めてないと思われます。）

npmの環境は以下の通りです。

  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "graphql-tag": "^2.10.1",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },