REACT- Turn my code using Formik or TextField if I want to use Yup?

Question

how can I turn my following code using Formik or TexField in order to create a multi step form (in such a way I can use Yup afterwards) ? I tried both but it's not working...

export default function Information() {
  const [userData, setUserData] = useState({});
  const handleChange = (e) => {
    const { value, checked } = e.target;
    setUserData((userData) => ({
      ...userData,
      [value]: checked
    }));
  };

  return (
    <div className="flex flex-col ">
        Title :
        <input
          onChange={handleChange}
          value={userData["title"]}
          name="title"
          placeholder="Title"
        />
      </div>
      ...
  );
}

Here my code

Here what I'm expected to have if I use Yup: