React "handleInputChange" function inconsistently not working with some inputs

I'm creating an inventory management system that allows users to store information regarding items in their house. If they have an apple, they can store its name ("Apple"), value ($2.99), and quantity (1) to localStorage.

There are three input fields:

Name, Value, and Quantity.

<input onChange = {props.handleInputChange} type = "text" name = "name" placeholder = {props.name ? props.name : "Name"}></input>

<input onChange = {props.handleInputChange} type = "number" name = "value" placeholder = {props.value ? props.value : "Value ($)"}></input>

<input onChange = {props.handleInputChange} type = "number" min = "0" name = "quantity" placeholder = {props.quantity !== null ? props.quantity : "Quantity"}></input>

The Name input always records and sends to state, but the others inconsistently come up null or NaN. The Quantity Input does this the most frequently (for some reason).

Now, I have absolutely no idea how this could possibly happen or where I'd even begin debugging. I tried changing handleInputChange to be more specific, but the error still inconsistently persists.

This is my handleInputChange method:

handleInputChange = (event) => {
        this.setState({
            [event.target.name] : event.target.value
        });
    }

Pretty straight forward. It used to have const {name, value} = event.target, but that's what I changed. It had no effect.

The state values that are supposed to be recorded begin like this:

name: null,
value: null,
quantity: null,
id: null,

The component "Modal" is directly inside the main return block on Home.js, where the state and most of the functions are.

My main problem, the thing that confuses me so much, is the fact that I made the handleInputChange function do console.log() for both the event.name and event.value, and that is where the issue came from. The console.log() inconsistently doesn't log the results, meaning that onChange isn't running in those instances. Ignoring all modal functions, an onChange event should always run the function on the change.

So, since <input type = "text"> worked, but not <input type = "number">, I thought to just change the input type to "text" for Value and Quantity. That didn't fix it.

For the sake of clarity and scope, here is the series of ternary methods I use to render the different types of content that should appear in the modal (this includes the inputs listed above):

{
 props.modalType !== "pocketbook" ?

      <form id = "modal-content"> 
        {props.modalType === "tax" /// For triggering the Tax Input Modal
          ? <input onChange = {props.handleInputChange} type = "number" name = "tax" placeholder = {props.tax ? 
               `${parseFloat(props.tax).toFixed(2)}%` : "Sales Tax (%)"}>
            </input>
          : // If it's not for taxes, it's for items
          <div>
            <input  type = "text" name = "name" placeholder = {props.name ? props.name : "Name"}></input>
            <br/>
            <input onChange = {props.handleInputChange} type = "text" name = "value" placeholder = {props.value ? props.value : "Value ($)"}></input>
            <br/>

            <div id = "qty-editors"> // This allows the user to set the quantity value via input or by pressing + or - buttons
                <input onChange = {props.handleInputChange} type = "text" name = "quantity" placeholder = {props.quantity !== null ? props.quantity : "Quantity"}></input>

                <div className = "div-button" id = "addition" onClick = {() => 
                {props.quantityEdit("add")}}>
                    <p className = "centered-XY">+</p>
                </div>

                <div className = "div-button" id = "subtraction" onClick = {() =>{props.quantityEdit("sub")}}>
                    <p className = "centered-XY">-</p>
                </div>

            </div>
            </div>
            }
      </form>

      :

       <div id = "pocketbook"> // This is simply for "pocket" creation, has nothing to do with the inputs.
         {
           allPockets.map(item => {
            return (

            <Pocket 
             name = {item}
             subtitle = {item}
             func = {"pocketbook"}
             pocketMethod = {props.pocketMethod}
            />

            );
           })
         }
       </div>
}

It can be argued that I'm relying too much on ternary operators. Unless that's causing the problem, however, don't address it in your answer.

As much information as I've given, in reality, the problem lies directly in the onChange functionality, because the console.log() doesn't run (again, inconsistently) when the input field is changed. I've tried avoiding using tab to cycle through the inputs, the issue persists. I've tried avoiding pressing the shift key inside the number inputs, the issue persists. I've tried setting the onChange method on the parent element(s), the issue persists. If anybody can tell me what exactly is going on and how I can fix it, it would absolutely save this project.