How to create valid numbers input validation in ReactJS using Material-UI TextField?

Question

What I want to do is just to accept valid number so if someone put text and click continue the application should display an error saying that just numbers are allowed and only for numbers these eE+- keys will not be accepted means single keys if user put just e and hit submit I need to throw an error. I am using Formik also

The following code does not display an error message if the textfield is empty and the other validation to check if the user inputs text or numbers is pending and I'm stuck.

like this way it needs to be supported

this is valid 
+1
-1
1e1

this blow is invalid need to throw error in this case
e
1-
1+
12e

const NumberField = (props) => {
  const { errorMessege, ...restProps } = props;

  const Number = /^-?(0|[1-9]\d*)(e-?(0|[1-9]\d*))?$/i;
  const numberConvertor = (e) => {
    if (e.target.value == '' || Number.test(e.target.value)) {
       return true
      console.log(e.target.value);
    } else {
      e.preventDefault();
       return false;
    }
  };

  return (
    <TextField
      fullWidth
      onKeyPress={numberConvertor}
      helperText={errorMessege}
      error={Boolean(errorMessege)}
      {...restProps}
    />
  );
};

Answer 1

According to your code:

https://codesandbox.io/s/sleepy-currying-5ib741?file=/NumberField.js

Chaneg the NumberField component to this:

const NumberField = (props) => {
  const { errorMessege, ...restProps } = props;

  const handleKeyDown = (e) => {
    const key = e.key;
    if (!/[\d+eE-]/.test(key)) e.preventDefault();
  };

  return (
    <TextField
      fullWidth
      onKeyDown={handleKeyDown}
      helperText={errorMessege ? errorMessege : ""}
      error={Boolean(errorMessege)}
      {...restProps}
    />
  );
};

export default NumberField;

and change formValidationSchema to this:

const formValidationSchema = Yup.object({
  value: Yup.string()
    .required("Please enter a number")
    .matches(
      /^[-+]?(\d+(\.\d*)?|\.\d+)([eE][-+]?\d+)?$/,
      "Please enter a valid number."
    )
    .min(1, "Please enter a value between 1 and 35.")
    .max(35, "Please enter a value between 1 and 35.")
});