i need help storing radio input in react context and keeping it selected after moving to another page.

[nebulahh]

i am building a multi step from with react and formik, this is the second page. i want a selected radio button input to be stored into react context and when i go back and forth between pages, i can still see the input selected and maybe change it. right now, no radio button is selected after clicking it

import { Field, Formik } from 'formik';
import { useContext, useState  } from 'react';
import FormContext from '../../context/formContextApi';
import iconAdvanced from '../../assets/icon-advanced.svg'
import iconArcade from '../../assets/icon-arcade.svg'
import iconPro from '../../assets/icon-pro.svg'
import './Step-2.css'

const Plans = () => {
 const { saveInfo, userInfo, handleNextStep, handlePrevStep } = useContext(FormContext)
 const [duration, setDuration] = useState('mo')

 function toggleDuration() {
  if (duration === 'yr') {
    setDuration('mo')
  } else {
    setDuration('yr')
  }
 }

const handleSubmit = (values) => {
  handleNextStep(values)
  console.log(values);
}

function goBack() {
  handlePrevStep()
} 

function change(e) {
  saveInfo(e.target.value)
}

return (
  <div>
    <Formik
      initialValues={{
        user_plan: ''
      }}
      onSubmit={handleSubmit}>
      {
        formik => (
          <form onSubmit={formik.handleSubmit} className='flex max-w-[375px] flex-col gap-2'>
            <div className='form'>
             
             <h1 className='py-3'>Select your plan.</h1>
             <p className='pb-2'>You have the option of monthly or yearly billing.</p>
             
             <div className="flex border-[#d6d9e6] w-full p-4 justify-start items-center h-20 border mb-3 cursor-pointer gap-4 rounded-lg">
              <label className='flex gap-5'>
                <img src={iconArcade} alt="icon" />
                <div className="flex gap-1  flex-col">
                  <b className='text-[#02295a]'>Arcade</b>
                  <span>$9/{duration}</span>
                </div>
                <Field type="radio" name="user_plan" onChange={formik.handleChange} value="arcade" checked={userInfo.user_plan === 'arcade'} />
              </label>
             </div>

            <div className="flex w-full border border-[#d6d9e6] items-center justify-start h-20 p-4 mb-3 cursor-pointer gap-4 rounded-lg">
              <label className='flex gap-5'>
               <img src={iconAdvanced} alt="icon" />
               <div className="flex flex-col">
                 <b className='text-[#02295a]'>Advanced</b>
                 <span>$9/{duration}</span>
               </div>
               <Field type="radio" name="user_plan" onChange={formik.handleChange} value="advanced" checked={userInfo.user_plan === 'advanced'} />
             </label>
            </div>

            <div className="flex border-[#d6d9e6] p-4 h-20 w-full border items-center justify-start cursor-pointer gap-4 rounded-lg">
              <label className='flex gap-5'>
              <img src={iconPro} alt="icon" />
               <div className="flex flex-col">
                <b className='text-[#02295a]'>Pro</b>
                <span>$9/{duration}</span>
               </div>
               <Field type="radio"  name="user_plan" onChange={formik.handleChange} value="pro" checked={userInfo.user_plan === 'pro'} />
              </label>
            </div>

            <div className="switcher bg-mongolia flex items-center gap-2 p-2 mb-20 justify-center">
              <p className="text-cool-gray font-medium sw-active">Monthly</p>
              <label className="switch relative inline-block w-[50px] h-[24px]">
               <input type="checkbox"
                onClick={toggleDuration}
                className='opacity-0 w-0 h-0'
               />
               <span className="slider round"></span>
             </label>
             <p className="text-cool-gray font-medium">Yearly</p>
           </div>

          </div>

          <footer className="bg-white absolute bottom-0 w-full h-16 px-3 flex items-center">
            <button type='submit' onClick={goBack}
             className="px-4 border-0 mt-auto mb-8 py-4 font-bold h-8 rounded-[7px] cursor-pointer">Go Back</button> 
          
            <button type='submit' onClick={handleSubmit}
            className="bg-[#02295a] ml-auto px-4 text-white font-bold h-8 rounded">next</button> 
          </footer> 
        </form>
        )
      }
   </Formik>

  </div>
)
}

export default Plans```