Мне нужно вычесть счетчик и обновить оставшийся счет

Я использую TextField, данные поля, которые я добавляю в таблицу, которая отлично работает, в чем заключается моя задача. У меня есть одно поле с именем Общее количество, и я храню свой счетчик данных, поэтому всякий раз, когда я добавляю данные в таблицу, он будет основан на счете, что означает например, если у меня есть счет 3, то я могу использовать счетчик максимум 3 или если я хочу разделить этот счет с другим именем, которое также работает только с максимальным счетчиком, я использовал все, что присутствует в Общее количество или после деления счетчика на имя пользователя, которое мне нужно обновить оставшееся количество в этом поле или любое другое количество, которое присутствует после добавления в таблицу, показывающую оставшееся количество, когда я использую все количество за один раз или добавляю его в таблицу, которая работает нормально, означает, что Общее количество вычитается из счетчика данных таблицы и остается 0, но когда Я делю это количество на 2 или 3 поля имен, что означает 1 на 1, тогда оно не будет работать должным образом, значит, количество не вычитается должным образом.

В этом методе я вычитаю и устанавливаю оставшееся количество

  const totalRemainingCount =
    totalUsers -
    Number(
      AssignSearchesForm.values.countAssigned ||
        teamdata?.map((data) => data.countAssigned)
    );

export default function App() {
  const [teamdata, setTeamData] = React.useState([]);

  const AssignSearchesForm = useFormik({
    initialValues: {
      selectName: "",
      selectAge: "",
      location: "",
      countAssigned: ""
    },
    validationSchema,
    onSubmit: (values, formikHelper) => {
      setTeamData([values, ...teamdata]);
      formikHelper.resetForm();
    }
  });

  let filteredArray = nameList.filter(
    (e) => !teamdata.some((data) => data.selectName === e.selectName)
  );

  const handleChangeEvent = (e) => {
    const selectedName = e.target.value;
    const name = nameList.find((data) => data.selectName === selectedName);
    const newOptions = Object.values(name).reduce((optionList, key) => {
      optionList.push({ value: key, label: key });
      return optionList;
    }, []);
    AssignSearchesForm.setFieldValue("selectName", selectedName);
    AssignSearchesForm.setFieldValue("selectAge", newOptions[1]?.value || "");
    AssignSearchesForm.setFieldValue("location", newOptions[2]?.value || "");
  };

  const totalUsers = 3;
  const totalRemainingCount =
    totalUsers -
    Number(
      AssignSearchesForm.values.countAssigned ||
        teamdata?.map((data) => data.countAssigned)
    );

  return (
    <div className = "App">
      <Card color = "primary" variant = "outlined">
        <CardHeader
          title = {
            <Typography variant = "subtitle1">
              Total no of count  = {" "}
              {totalRemainingCount <= 0 ? 0 : totalRemainingCount}
            </Typography>
          }
        />
        <Divider />
        <CardContent>
          <Grid container direction = "row" spacing = {1}>
            <Grid item xs = {4}>
              <TextField
                sx = {{ minWidth: 185 }}
                select
                id = "outlined-basic"
                label = "Select Name"
                name = "selectName"
                size = "small"
                onChange = {handleChangeEvent}
                value = {AssignSearchesForm.values.selectName}
                error = {
                  AssignSearchesForm.errors.selectName &&
                  AssignSearchesForm.touched.selectName
                }
                helperText = {
                  AssignSearchesForm.touched.selectName &&
                  AssignSearchesForm.errors.selectName
                }
              >
                {filteredArray?.map((option) => (
                  <MenuItem key = {option.selectName} value = {option.selectName}>
                    {option.selectName}
                  </MenuItem>
                ))}
              </TextField>
            </Grid>
            <Grid item xs = {4}>
              <TextField
                id = "outlined-basic"
                label = "location"
                name = "location"
                size = "small"
                {...AssignSearchesForm.getFieldProps("location")}
                error = {
                  AssignSearchesForm.touched.location &&
                  AssignSearchesForm.errors.location
                }
                helperText = {
                  AssignSearchesForm.touched.location &&
                  AssignSearchesForm.errors.location
                }
              />
            </Grid>
            <Grid item xs = {4}>
              <TextField
                id = "outlined-basic"
                label = "Select Age"
                name = "selectAge"
                size = "small"
                {...AssignSearchesForm.getFieldProps("selectAge")}
                error = {
                  AssignSearchesForm.errors.selectAge &&
                  AssignSearchesForm.touched.selectAge
                }
                helperText = {
                  AssignSearchesForm.touched.selectAge &&
                  AssignSearchesForm.errors.selectAge
                }
              />
            </Grid>
            <Grid item xs = {4}>
              <TextField
                id = "outlined-basic"
                label = "Count Assign"
                name = "countAssigned"
                size = "small"
                type = "number"
                {...AssignSearchesForm.getFieldProps("countAssigned")}
                error = {
                  AssignSearchesForm.errors.countAssigned &&
                  AssignSearchesForm.touched.countAssigned
                }
                helperText = {
                  AssignSearchesForm.touched.countAssigned &&
                  AssignSearchesForm.errors.countAssigned
                }
              />
            </Grid>
            <Grid item xs = {4}>
              <Button
                onClick = {() => {
                  AssignSearchesForm.handleSubmit();
                }}
                variant = "contained"
              >
                Add
              </Button>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
      <Table teamdata = {teamdata} />
    </div>
  );
}

Ссылка на CodeSandBox