ذهاب التركيز (focus) لحقول الادخال(inputs) بعد طباعة اول حرف في مكتبة رياكت

السلام عليكم ورحمة اله تعالى وبركاته ، 

اعمل على تطبيق رياكت بسيط CRUD users، 

وعند طباعة اول حرف او رقم في حقل الادخال input  يفقد التركيز focus  الخاص به , ثم يجب عليه الضغط عليه مرة اخرى لاعادته ، 

بحثت كثيرا حول حل للمشكل في عدة مواقع ، وحتى اني استعنت بالChatGpt

 لكن لم يجدي اي حل نفعا ، 

ارجو من واجهته نفس المشكل ان يخبرني كيف قام بحلها من فضلكم .

شكرا .

import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Heading from "./Components/Heading";
import { useState } from "react";
import Button from "./Components/Button";
import Table from "./Components/Table";
import UsersInfo from "./Components/UsersInfo";

function App() {
  const [users, setUsers] = useState([]);
  const [fullname, setFullname] = useState("");
  const [age, setAge] = useState("");
  const [jobtitle, setJobtitle] = useState("");
  const [email, setEmail] = useState("");

  const [darkMood, setDarkMood] = useState(false);
  const [addUser, setAddUser] = useState(false);
  const handleToogleMood = () => {
    setDarkMood(!darkMood);
  };
  const handleFullName = (e) => {
    setFullname(e.target.value);
  };
  const handleAge = (e) => {
    setAge(e.target.value);
  };
  const handleJobTitle = (e) => {
    setJobtitle(e.target.value);
  };
  const handleEmail = (e) => {
    setEmail(e.target.value);
  };
  const saveNewUserHandler = () => {
    const newUser = {
      id: Date.now(),
      FullName: fullname,
      Age: age,
      JobTitle: jobtitle,
      Email: email,
    };
    const newUsers = [...users, newUser];
    setUsers(newUsers);
    setAddUser(false);
    setFullname("");
    setAge("");
    setEmail("");
    setJobtitle("");
  };

  const AddUser = () => {
    return (
      <div>
        <div className="d-flex justify-content-between">
          <h1 className={`text-left text-danger font-weight-bold`}>
            Add User
          </h1>
          <button
            className="btn btn-primary font-weight-bold"
            onClick={handleToogleMood}
          >
            Toogle Mood
          </button>
        </div>
        <div className="col-6">
          <input
            type="text"
            placeholder="Full Name"
            className="mb-2 form-control"
            value={fullname}
            onChange={handleFullName}
          />
          <input
            type="number"
            placeholder="Age"
            className="mb-2 form-control"
            value={age}
            onChange={handleAge}
          />
          <input
            type="text"
            placeholder="Job Title"
            className="mb-2 form-control"
            value={jobtitle}
            onChange={handleJobTitle}
          />
          <input
            type="email"
            placeholder="Email"
            className="mb-2 form-control"
            value={email}
            onChange={handleEmail}
          />
          <Button type={saveNewUserHandler} text="Save" />
        </div>
      </div>
    );
  };
  const AddNewUserHandler = () => {
    setAddUser(true);
  };
  const UsersPreview = () => {
    return (
      <>
        <Heading
          text="CRUD APP"
          handleToogleMood={handleToogleMood}
          color="danger"
        />
        <Button text="Add new User" type={AddNewUserHandler} />
        <Table darkMood={!darkMood}>
          {users.map((user, index) => {
            return (
              <UsersInfo
                key={user.id}
                index={index + 1}
                fullName={user.FullName}
                age={user.Age}
                job={user.JobTitle}
                email={user.Email}
                autoFocus
              />
            );
          })}
        </Table>
      </>
    );
  };




  return (
    <div>
      <div
        className={`${
          !darkMood && "bg-dark"
        }  app d-flex  justify-content-center`}
      >
        <div className="container mt-5">
          {addUser ? <AddUser /> : <UsersPreview />}
        </div>
      </div>
    </div>
  );
}

export default App;