How to handle multiple input field which is rendered using map method, with react-redux?

I have a product list(without quantity) in json-server and fetch using react-redux and rendered in table. I also have a input field to get quantity from user to calculate the total by mutiplying product price(from json-server) with product quantity(from input field).

The total field in list showing NaN. I guess the problem is with qty. How to avoid the error? how to initialise initial state to 0 for all input field in table?

import FormInput from './Components/FormInput';
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchList } from './Components/Store/action';
function App() {

  const { list } = useSelector((state) => state.list)
  const dispatch = useDispatch()
  const [qty, setQty] = useState({})
 
  const handleChange = (e) => {
    e.preventDefault()
    const { name, value } = e.target;
    setQty({
      ...qty,
      [name]:value 
    });
  }


  useEffect(() => {
    dispatch(fetchList())
  }, [dispatch])


  let sum = 0

  list.forEach((item) => {
    sum += item.price * qty[item.name]
  })


  const submitHandler = (e) => {
    e.preventDefault()
  }

  return (
    <div >
      <form onSubmit={submitHandler}>
        <table>
          <thead>
            <tr>
              <th>S.no</th>
              <th>Name</th>
              <th>Unit</th>
              <th>price</th>
              <th>Quantity</th>
              <th>total</th>
            </tr>
          </thead>
          <tbody>
            {list.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.unit}</td>
                <td>{item.price}</td>
                <td>
                  <FormInput
                    type="number"
                    name={item.name}
                    handleChange={handleChange}
                    value={qty[item.name]} 
                  />
                </td>
                <td>{item.price * qty[item.name]}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <button type='submit'>Submit</button>
      </form>
      <h1>total:{sum}</h1>
    </div>
  );
}

export default App;

I tried to set initial state for qty. i expect the all input fields to be a number 0 instead of string or undefined