react-material-ui | This project was bootstrapped with Create React App | Frontend Framework library

I am trying to write out a website with responsive-based app bar with a drawer tagged onto it. I am using this design found at https://medium.com/@tsubasakondo_36683/create-responsive-drawer-menu-with-react-material-ui-617a42764b69 and modifying it accordingly. But unfortunately, I am getting this issue, in which the drawer covers the portion of the content trying to be displayed. Please know that I have seen similar questions on this site, but I couldn't figure out how to solve them or the answers were kind of vague. Any help would be much appreciated, please let me know if I need to clarify anything further. All of this is using Material UI components.

Here is my code:

Material UI App-Bar

I'm working on a React project and I'm trying to use this library(https://www.npmjs.com/package/react-image-gallery)

from npm And from the Documentation, they say we must add these instructions to import the CSS

my component

I have an existing React Web application that uses a CSS Grid to layout the website, the look is:

I want to dynamically change Popper position on the screen with react-draggable.

Here's my code:

Is there any way to replace the navigation icons of react-material-ui datepicker? I have tried a lot but nothing works.

goal

I have a multiple field that:

1. we can select users present in the autocompletion (a list that I retrieve via API)
2. We can enter the names of new users that we separate them with a comma

For that, I therefore need to retrieve the value of value and inputValue. For value, there is no problem but for inputValue, there is something that I do not understand

problem

When I modify the value of inputValue in onInputChange, its state is modified and reseted like that

information

I base on the example that material UI offers

Code in Sandbox

Code

I am using this carousel-library.
I want to show two cards in each slide in my carousel. My code-

Catalog.js

How can I configure my number of pages per carousel to have a limit of noOfPages? I'm not sure how to implement this in my functions below.

I need to remove the underline of Material UI Select list on hovering.

I tried https://codesandbox.io/s/nifty-rubin-6x9po?file=/src/Dropdown.jsx which removes the underline by default but when hovered, the underline still shown

i referred How to change Material UI input underline colour? and Removing underline style of autocomplete in react material ui component but both dealt with how to show, I entirely want to remove the underline from select list. Any help is appreciated, thanks :)