title: React Query useMutation set mutationKey dynamically
body: <p>In my React project using React Query, I have a functional component <code>MoveKeywordModal</code> such that:</p>
  <ol>
  <li><p>when it first loads, it fetches from API endpoint <code>api/keyword_lists</code> to fetch a bunch of <code>keywordLists</code> data. For each of these <code>keywordLists</code>, call it <code>list</code>, I create a clickable element.</p>
  </li>
  <li><p>When the clickable element (wrapped in a <code>HoverWrapper</code>) gets clicked, I want to send a POST API request to <code>api/keyword_lists/:list_id/keyword_list_items/import</code> with some data.
  where <code>:list_id</code> is the id of the list just  clicked.</p>
  </li>
  </ol>
  <pre><code>export const MoveKeywordModal = ({
    setShowMoveKeywordModal,
    keywordsToMove
  }) =&gt; {
    const { data: keywordLists } = useQuery('api/keyword_lists', {})
    const [newKeywordList, setNewKeywordList] = useState({})
    const { mutate: moveKeywordsToList } = useMutation(
      `api/keyword_lists/${newKeywordList.id}/keyword_list_items/import`,
      {
        onSuccess: data =&gt; {
          console.log(data)
        },
        onError: error =&gt; {
          console.log(error)
        }
      }
    )
    const availableKeywordLists = keywordLists
      .filter(l =&gt; l.id !== activeKeywordList.id)
      .map(list =&gt; (
        &lt;HoverWrapper
          id={list.id}
          onClick={() =&gt; {
            setNewKeywordList(list)
            moveKeywordsToList({
              variables: { newKeywordList, data: keywordsToMove }
            })
          }}&gt;
          &lt;p&gt;{list.name}&lt;/p&gt;
        &lt;/HoverWrapper&gt;
      ))
  
    return (
      &lt;&gt;
        &lt;StyledModal
          isVisible
          handleBackdropClick={() =&gt; setShowMoveKeywordModal(false)}&gt;
          &lt;div&gt;{availableKeywordLists}&lt;/div&gt;
        &lt;/StyledModal&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>Despite calling <code>setNewKeywordList(list)</code> in the <code>onClick</code> of the <code>HoverWrapper</code>, it seems the <code>newKeywordList.id</code> is still not defined, not even <code>newKeywordList</code> is defined.</p>
  <p>What should I do to fix it?</p>
  <p>Thanks!</p>