react-highlight | React component for syntax highlighting | Code Inspection library

I'm trying to do some code formatting and display code snippets in my page. I'm using react-highlight.js to do this. Code and working example as below:

https://codesandbox.io/s/nifty-morning-v4ew3?file=/src/index.js

Now what I want to put in between the backticks are:

Context: I have table cell which have ellipsis, so I want to have a tooltip over the title. Currently I am using Material UI Tooltip. Also, since there is a search option and hence I am using the highlighter react-highlight-words to highlight the search term.

Problem: When wrapping the Highlighter component with the Tooltip, the tooltip is not popping up as it does usually. I have used react-tooltip instead and it works.

Below is the code snippet of what I am trying to render :-

I'm trying to use Antd Table https://ant.design/components/table/ with customized filters and React Hooks. Most of all code from provided example were converted to hooks' logic successfully but I have no idea how to convert "this.searchInput" (which are commented below) from the code.

Example from the Antd site which was converted by me to React Hooks:

How to connect polyfill correctly? I read all the documentation Babel 7 and followed it. Below you can see my settings. if I add this in the webpack config

I am working with antd table. Is there a way I could add a search filter outside the table and still search in the table?

Demo.

I added an input field just above the table. But I cannot understand how I could link this to the search functionality available with antd. I have also added the search filters for each column but also want to have a separate field outside. The column filters work fine.

For easier reference, I am also pasting the demo code here:

As far as I can see ant design's table currently doesn't ship with a specific numeric search, where I can return results within a specific range, example >10 or <=50.

Given the below example: codesandbox

I am trying to build a project with npm run-script build

my package.json is like this

I have an antd table with 2 columns which I need to filter on the first, and search text on the second column.

From my code, the application is rendered fine. Please note the tags field is a json array, not a text field, so I guess that has something to do with the error.

Updated 1 Code.

I want to reset the custom search dropdown text input when clicking a button when using antd table.

I can't ref the filterDropdown, I've tried to ref the table but no luck, it wont give me back handleClearFilters in order to clear the search input since this prop belongs to filterDropdown.

Has anyone managed to clear the search input?

playground: https://codesandbox.io/s/87o53mq29

Update:

Here's the final working code as per @shubham answer: