SoftInput lose focus when I use onChange

[ferchomuri]

Hello, I have a problem when I want to handle changes in the Softinput component.

When I enter a character, it only detects the first one I enter, then it loses focus. I have to click again.

Another error that I think derives from this is when I enter a normal input (< input />) with a handle change within a soft component, it works very slowly, it gets stuck when entering or deleting characters.

This is the code

/**
=========================================================
* Soft UI Dashboard React - v4.0.0
=========================================================

* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-react
* Copyright 2022 Creative Tim (https://www.creative-tim.com)

Coded by www.creative-tim.com

 =========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

// @mui material components
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";

// Soft UI Dashboard React components
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";

// Soft UI Dashboard React examples
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import Footer from "examples/Footer";
import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
import GradientLineChart from "examples/Charts/LineCharts/GradientLineChart";

// Soft UI Dashboard React base styles
import typography from "assets/theme/base/typography";

// Dashboard layout components
import BuildByDevelopers from "layouts/dashboard/components/BuildByDevelopers";
import WorkWithTheRockets from "layouts/dashboard/components/WorkWithTheRockets";
import Projects from "layouts/dashboard/components/Projects";
import OrderOverview from "layouts/dashboard/components/OrderOverview";

// Data
import reportsBarChartData from "layouts/dashboard/data/reportsBarChartData";
import gradientLineChartData from "layouts/dashboard/data/gradientLineChartData";
import outstandingGapChartData from "./data/outstandingGapChartData";
import tableData from "./data/pricingTableData";
import equipmentData from "./data/equipmentTableData";
import dealTableData from "./data/dealTableData";
import Table from "../../examples/Tables/Table";
import { useState } from "react";

function Dashboard() {
  //States
  const [outstanding, setOutstanding] = useState({ riskClass: 50, equipCost: 10, downPay: 20 });

  const { size } = typography;
  const { chart, items } = reportsBarChartData;
  const { columns, rows } = tableData(outstanding, setOutstanding);
  const { dealColumns, dealRows } = dealTableData();
  const { columnNames, rowNames } = equipmentData();

  const [riskClass, setRiskClass] = useState("");

  const handleSelectChange = (event) => {
    setRiskClass(event.target.value);
  };

  return (
    <DashboardLayout>
      <DashboardNavbar />
      <SoftBox py={3}>
        <SoftBox mb={3}>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6} xl={5}>
              <SoftBox
                mb={2}
                sx={{
                  "& .MuiTableRow-root:not(:last-child)": {
                    "& td": {
                      borderBottom: ({ borders: { borderWidth, borderColor } }) =>
                        `${borderWidth[1]} solid ${borderColor}`,
                    },
                  },
                }}
              >
                <input
                  type="number"
                  placeholder="Type here.."
                  name="riskClass"
                  id="riskClass123"
                  onChange={handleSelectChange}
                  value={riskClass}
                />
                <Table columns={columns} rows={rows} />
              </SoftBox>
              <SoftBox>
                <SoftTypography>Equipment:</SoftTypography>
              </SoftBox>
              <SoftBox
                sx={{
                  "& .MuiTableRow-root:not(:last-child)": {
                    "& td": {
                      borderBottom: ({ borders: { borderWidth, borderColor } }) =>
                        `${borderWidth[1]} solid ${borderColor}`,
                    },
                  },
                }}
              >
                <Table columns={columnNames} rows={rowNames} />
              </SoftBox>
            </Grid>
            <Grid item xs={12} sm={6} xl={7}>
              <GradientLineChart
                title="Outstanding gap position"
                height="40.25rem"
                chart={outstandingGapChartData}
              />
            </Grid>
          </Grid>
        </SoftBox>
        <SoftBox mb={3}>
          <Grid container>
            <Grid item xs={12} sm={12} xl={12}>
              <SoftBox>
                <SoftTypography>DEAL P&L:</SoftTypography>
              </SoftBox>
              <SoftBox
                sx={{
                  "& .MuiTableRow-root:not(:last-child)": {
                    "& td": {
                      borderBottom: ({ borders: { borderWidth, borderColor } }) =>
                        `${borderWidth[1]} solid ${borderColor}`,
                    },
                  },
                }}
              >
                <Table columns={dealColumns} rows={dealRows} />
              </SoftBox>
            </Grid>
          </Grid>
        </SoftBox>
      </SoftBox>
      <Footer />
    </DashboardLayout>
  );
}

export default Dashboard;