input tag in react not letting enter more than one character when array of inputs are rendered in a loop

The issue is with your key value, which you are setting to uuid(). Every time the component re-renders you generate a new UUID, which creates a brand new input. You can see it working here using the index as the key instead.

import React, { useState, useEffect } from "react";
import { InnerWrapper, Heading } from "./styling";
import uuid from "react-uuid";

export const ProductView = (props) => {
  const [productData, setProductData] = useState(props.productData);

  const updateProductData = (newQuantity = undefined, index = "") => {
    const _ = productData.map((data, idx) => {
      if (idx === index) {
        return {
          ...data,
          quantity: newQuantity ? newQuantity : data.quantity
        };
      } else {
        return { ...data };
      }
    });
    setProductData(_);
  };

  const onChangeQuantityHandler = (e) => {
    e.preventDefault();
    const newQuantity = parseInt(e.target.value.trim());
    const index = parseInt(e.target.dataset.index);
    updateProductData(newQuantity, index);
  };

  return (
    <InnerWrapper flexDirection="column">
      <table>
        <thead>
          <tr>
            <th> Quantity </th>
          </tr>
        </thead>
        <tbody>
          {productData.map((data, idx) => {
            return (
              <tr key={idx}>
                <td>
                  <input
                    value={data.quantity}
                    name="quantity"
                    data-index={idx}
                    onChange={onChangeQuantityHandler}
                  />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </InnerWrapper>
  );
};

If you truly want to use a UUID as the key, I suggest you generate one beforehand.