title: How can I implement search input box in the react context menu using react contextify library?
body: <p>I am using the react contextify. But my input box which I am going to implement in it, whenever I click on it then the blinking cursor doesn't appear on the context menu.</p>
  <p>And also whenever I click on the input box the position of the context menu changes to the right and doesn't disappear on single click event.</p>
  <p>This is my code:</p>
  <pre><code>import React, { useState,useRef } from 'react';
  import {
      Menu,
      useContextMenu
  } from &quot;react-contexify&quot;;
  import &quot;react-contexify/dist/ReactContexify.css&quot;;
  
  const MENU_ID = &quot;menuid&quot;;
  
  const triggerRef = useRef();
  
  const { show } = useContextMenu({
      id: MENU_ID
  });
      
  &lt;div className=&quot;filter&quot; onClick={show}&gt;
      &lt;div&gt;
          &lt;Menu id={MENU_ID} animation={false}&gt;
              &lt;Item&gt;
                  &lt;input type=&quot;text&quot; name=&quot;&quot; id=&quot;search&quot; placeholder=&quot;Search&quot; /&gt;
                  &lt;Search /&gt;
              &lt;/Item&gt;
          &lt;/Menu&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The thing which I want is whenever I click on the <code>button</code> then the context menu should appear. After that, I click on the input box and type anything in it to search. The rest of the item in it functions like whenever I click on it, the context menu should disappear.</p>
  <p>How can I do that ?</p>