formik-material-ui | Reusable TextField and SelectField for Formik | User Interface library

I am making a web project using React, Material, Formik, formik-material-ui.

This is the input screen I am getting of my form. The select input height is bigger than the textfield inputs.

The InputField component is as follows:

I have little experience in Javascript and React, I need to disable the action buttons in modal while the form is submitting, I've searched the internet and haven't found a solution.

Below is the structure of the project:

Countries list:

I have to attached variables to TextField and I want that variables will be deleted as a whole and not editable. Is it possible?

Codesandbox here CLICK HERE

code

I have a message field that I need to type on. before that I have variable dropdown that I need to APPEND to the message field everytime I select on it. My problem is that its overriding it. I'm using formik and Material-UI in React.

CODESANDBOX

I am trying to implement the autocomplete component of the ui material, I would like that when there is a change in the selection, I would capture the ID of the selected team.

As below, i'm getting the team name, how would you get the ID?

Complete code: .

I'm new to all three technologies and searched for an answer, but couldn't find one. Note: I simplified the file to make it easier to parse through while you read it, hopefully I didn't cut anything important for debugging.

I would like to have my form register as touched when a user clicks to select the date using the calendar picker. Currently I can display the error in the helperText, but it does not alter the style of the form in the same way as it will if the user clicks in the field as though they intend to type it in themselves.

This is a very strange issue but I was using react-table 7.0.0.rc16 and I recently upgraded to react-table 7.0.1 the problem is my data works in dev mode but as soon I create a react build it wont render anything I would like to know why and I am attaching my package.json for the same. sandbox

Demo

Package.json

I have a problem in validation. I wanted that if access value is 1 then you can select the start_date and end_date BUT if the value of access is not 1, then you can only select today.

Codesandbox

How do you modify the formik onChange handler so that it saves the value only (rather than an array of the value plus label) for options passed to Material UI Autocomplete field?

I have a collection which has a document with an attribute called category. Currently, the category gets populated with both the label and value from the form entry options.

I'm struggling to find a way to get a firebase where query to find the value attribute of the array.

I'm wondering if I might get closer to a working solution if I try to just save the value instead of both the label and the value into firestore.

I have a Formik form with: