How do i make the data in the input feild of my form in next js stay after refresh of the page?

I am working on a form in nextjs and i would love the data to remain the same i.e persist after the entire page as been refreshed or reloaded . Local storage doesnt work with next js , so i am looking for an alternative , i always get local storage not defined when i use it
Here is my code below

import React, { useState, useEffect, useLayoutEffect, createContext , useContext } from "react";
import { useRouter } from "next/router";
import Cookie from "js-cookie";
import { parseCookies } from "../helpers/index";
import { Formik } from "formik";
function Form() {
  
  return (
    
      <div>
     
      <form action="" >
        <section class="left">
          <div class="input-container">
            <label for="name">Full name</label>
            <input
              type="text"
             
            />
          </div>
          <div class="input-container">
            <label for="age" required>
              Mobile Number
            </label>
            <input
              type="text"
              
            />
          </div>
          <div class="input-container">
            <label for="phone">Choose password</label>
            <input
              type="text"
             
            />
          </div>
          
            
          </div>
        </section>
      </form>
      
    </div>


  );
}

export default Form;


  

THANK YOU SO MUCH