State lost value in bootstrap table

Question

I am using custom fields in react bootstrap table.

 {
  dataField: "hours",
  text: "# of Hours",
  sort: true,
  footer: "# of Hours",
  headerStyle: (colum, colIndex) => {
    return { width: "10%" };
  },
  formatter: (cellContent, row) => {
    return (
      <div className="form-row">
        <AvForm>
          <Controls.Input
            name="hours"
            type="text"
            placeholder="Enter Hours"
            value={rosterData.hours}
            handleChange={handleChange}
          />
        </AvForm>
      </div>
    );
  },
},

My handle change Function

    const [rosterData, setRosterData] = useState({
    S_time: "21:00",
    hours: "",
  });



 const handleChange = (evt) => {
    const value = evt.target.value;
    setRosterData({ ...rosterData, [evt.target.name]: value });
  };

When I enter the value in field, state set that value, but when I click on save button for using that value, state becomes empty.

Button for saving data

{
  dataField: "action",
  text: "Action",
  footer: "Action",
  isDummyField: true,
  formatter: (cellContent, row) => {
    return (
      <div>
        <AiFillSave
          style={{ color: "#0190d5", cursor: "pointer" }}
          onClick={() => submitRoster(row.id)}
        />
      </div>
    );
  },
},

function for save button

const submitRoster = (id) => {
const data = {
  id: id,
  S_time: rosterData.S_time,
  hours: rosterData.hours,
};
console.log("onclick Data=", data);
};