I use handleChange to set the state value, but it not change

I want to create responsive multiple forms (form1, form2, and form3) with the same pages using framer motion. However, when I create the state value and want to make it change when the user fills the form by using setValue in handleChange, the value of the state is not updated correctly as I want. When the user fills Select Protocol the filled form is not updated on the user screen but the state is changed. Moreover, when the user fills Select number of hops after that, the link level state is deleted. I have no idea how to fix this problem.

import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

export default function ExperC() {

  // state that I want to collect user fill form
  const [value, setValue] = useState({
    link_level: "",
    hop_select: "",
    num_hop: "",
    location_1: "",
    location_2: "",
    photon_loss: "",
    dep: "",
    gate_error: "",
    coherent: "",
    mea_error: "",
    trajectory: "",
  });

  const handleChangeLinklevel = (e) => {
    setValue({ ...value, link_level: e.target.value });
  };
  const handleChangeHop = (e) => {
    setValue({ ...value, hop_select: e.target.value });
  };

  // jsx of form 1
  const form1 = (
    <form action="" className="w-[140%]">
      <div className="flex space-x-2">
        <h1 className="text-[#fff] text-4xl">Configure your </h1>
        <h1 className="text-[#ad73f1] text-4xl">Qwanta network</h1>
      </div>

      <p className="mt-5 mb-2 text-gray-400">Select Protocol</p>
      <select
        className="w-full h-8 text-black bg-white"
        onChange={handleChangeLinklevel}
        value={value.link_level}
      >
        <option value="" disabled selected>
          Select your protocol
        </option>
        <option value="0G">0 Generation (0G)</option>
        <option value="1G">1G-Ss-Dp (1G)</option>
        <option value="2G-NCX">2G-NonLocal-CNOT (2G-NCX)</option>
        <option value="HG-DE">1-2G-Directed-Encoded, (HG-DE)</option>
        <option value="HG-E2E-PE">HG-E2E-PurifiedEncoded</option>
        <option value="Design own protocol">Design own protocol</option>
      </select>

      {useEffect(() => {
        console.log("test", value);
      })}

      <p className="mt-5 mb-2 text-gray-400">Select number of hops</p>
      <select
        className="w-full h-8 text-black bg-white"
        onChange={handleChangeHop}
        value={value.hop_select}
      >
        <option value="" disabled selected>
          2^n hops
        </option>
        <option value="2">2 hops, 3 nodes</option>
        <option value="4">4 hops, 5 nodes</option>
        <option value="8">8 hops, 9 nodes</option>
      </select>
    </form>
  );

  const form2 = <>This is form 2</>

  const form3 = <>This is form 3</>;

  // for responsive slide between form using framer motion
  const experitem = [
    { name: "config1", icon: "test1", form: form1 },
    { name: "config2", icon: "test2", form: form2 },
    { name: "config3", icon: "test3", form: form3 },
  ];

  const [selectedTab, setSelectedTab] = useState(experitem[0]);

  return (
    <div className="flex flex-col w-[800px] h-[600px] absolute top-[150px] bg-[#262626] left-1/3 rounded-xl overflow-hidden">
      <nav className="bg-gray1 pt-3 px-3 rounded-t-xl h-[60px]">
        <ul className="flex w-full">
          {experitem.map((item, index) => (
            <motion.li
              key={index}
              className={`text-white list-none cursor-pointer rounded-t-xl w-full p-3 relative bg-[#262626] h-[70px] flex justify-between align-middle flex-1 min-w-0
            `}
              onClick={() => setSelectedTab(item)}
              initial={{ y: 0 }}
              whileHover={{ y: -5 }}
            >
              {item.name}
              {/* {item == selectedTab ? (
                <div className="absolute -bottom-[2px] left-0 right-0 h-[1px] bg-blue-500" />
              ) : null} */}
            </motion.li>
          ))}
        </ul>
      </nav>

      <main className="bg-[#262626] flex justify-left align-middle flex-grow mt-6 ml-5">
        <AnimatePresence exitBeforeEnter>
          <motion.div
            key={selectedTab ? selectedTab.name : "empty"}
            initial={{ x: -100, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            exit={{ x: -10, opacity: 0 }}
            transition={{ duration: 0.2 }}
          >
            {selectedTab ? selectedTab.form : null}
          </motion.div>
        </AnimatePresence>
      </main>
    </div>
  );
}