We have an edit information page in which we're using a Formik form to edit the data in a table. The flow is click row => edit => goes to ".../edit/2' page and edits id #2).

I was previously using useFormik but heard that it was only used in some use cases, so I switched over to wrapper.

In the form component I am using Redux RTK useSelector to get the data associated to the id in params and then assign that to the initial values so the form come pre-populated with information. Something like this:

const { id } = useParams();
const rowData = useSelector(state => state.rowData.rowData.filter(data => data.id == id);
const initialValues: {
  name: rowData.name,
  description: rowData.description,
  id: id
};

However, the issues is that when I refresh the page I get a reference error because my initial value is trying to access a property that is undefined. Specifically, saying: Cannot read properties of undefined (reading 'name')