Edittable field in reactjs

export default function UserProfile(props) {
  const { isLoggedIn, user, profile  } = useSelector((state) => state.AuthReducer);
  const { wallet, paired_curency_price, coins, wallet_loading } = useSelector(
    (state) => state.coinDBReducer
  );
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(true);
  const [hide, setHide] = useState(false);
  const [nodisplay, setDisplay] = useState(false);
  const [name, setName] = useState("");
  const [total_btc, setTotalBtc] = useState(0);
  const [total_usdt, setTotalUsdt] = useState(0);
  const updateProfile = (e) => {
    e.preventDefault();
    if (checkName(name)) {
      N_updateName(
        user?.params ? user.params.token: user.token,
        name
      ).then((res) => {
        if (res.status.matchedCount == 1) {
          setName("");
          setDisplay(!nodisplay);
          N_getProfile(user?.params ? user.params.token: user.token)
        .then((d) => {
          if (d.status === 200) {
            dispatch({type:'PROFILE', data:d?.params.profile_info})
          }
        })
        .catch((e) => {
          console.log(e);
        });
          NotificationManager.success("Updated Successfully");
        } else {
          NotificationManager.error(res.message);
        }
      });
    } else {
      NotificationManager.error("Enter valid nick Name");
    }
  };

  <main className="s-layout__content">
    <div className="container-fluid">
      <div className="account_page">
        <div className="col-lg-12">
          <div className="jambotron">
            <div className="horizontal_display_with_justify">
              <div className="flex_row">
                {" "}
                <div className="name_circle">
                  {profile?.name
                    ? profile?.name
                      ?.split("")
                      .slice(0, 2)
                      .join("")
                      .toUpperCase()
                    : profile?.email
                       ?.split("")
                       .slice(0, 2)
                       .join("")
                       .toUpperCase()}
                </div>
                {" "}
                {nodisplay 
                  ? <><span>Hello</span>
                    <div>
                      <input
                        className="editable-input-box"
                        type="text"
                        contentEditable={true}
                        value={name}
                        onChange={(e) => {
                          setName(e.target.value.replace("/a-zA-z*/i", ""));
                        }}
                      />
                    </div>
                    </>
                  : <div className="big_heading text-capitalize me-2 text-truncate mob_mw_150">
                      {" "}Hello,{" "}
                      {hide
                        ? "**********"
                        : profile?.name
                        ? profile.name
                        : profile?.email}{" "}
                    </div>}
                    <div>
                      {nodisplay ?
                        <>
                          <div className="d-flex gap-1">
                            <button
                              className="btn btn-pink btn-sm fs-14"
                              onClick={(e) => {
                                updateProfile(e);
                              }}
                            >
                              Update
                            </button>
                          </div>
                        </> : <></>  
                      }
                    </div>
                    <div>
                      <span
                        className="cursor_pointer"
                        onClick={() => {
                          setDisplay(!nodisplay);
                          setName(profile?.name)
                        }}
                      >