autosuggest-highlight | highlighting text in autosuggest and autocomplete | Autocomplete library

I'm trying to use this hook along with Material-UI's Autocomplete component, but am not having much success. Does anyone have an example of this scenario?

I receive a TS error for the value prop, stating

I need to remove the right icons that are the up and down arrows from a Material UI TextField that I modified from the Material UI documentations (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section.

I tried some solutions from stack overflow like (Remove the arrow and cross that appears for TextField type=“time” material-ui React) and (Remove the arrow and cross that appears for TextField type=“time” material-ui React) but they didn't work and, I ended up with the following code:

App.js:

I need to modify the Autocomplete Highlight provided as an example to fit my needs. (https://material-ui.com/components/autocomplete/#autocomplete)

The Highlight example provided has borders so I used the solution from this link (how to remove border in textfield fieldset in material ui) to modify my TextField and remove it's border and it works except that when I type in the search input I don't get the autocomplete suggestions.

I also replaced the Icon, and ended up with the following code:

when i try to build my project with yarn run build i get errors that are not exist in my code my code is clean it works fine in my local. I've been stuck for two weeks to resolve this problem please help me to solve this problem. this the errors that i get

node version: v10.15.3

webpack: 4.30.0 this is my package.json

I have a React app created with CRA, it compiles and runs fine. But production build made with yarn buld and served with serve -s build shows following error in console:

I'm facing a problem with the search. It is a front-end search rather than a remote search, I'm using react.js because it is a requirement in the problem and created a component named App. My task is to display and highlight the matching parts according to the type value.

I will appreciate it. If you provide me a good solution for this.

Let me tell you the whole scenario. I'm dividing this problem into 3 parts.

Part 1: What is the shape of the data?

The shape of the data is this:

src/data.js:

it does not render DOM show error I can give my source code If it can help to solve the problem more easily

package.json