Skeletal of the presentation component that receives data as props

ResourceEditForm.jsx

const ResourceEdit = ({
  resource,
  mappedCategories,
  mappedCategoryContentAreas,
  mappedTopics,
}: {
  resource: DataAccess.ResourceApiModel;
  mappedCategories: { [key: string]: string };
  mappedCategoryContentAreas: { [key: string]: string };
  mappedTopics: { [key: string]: string };
}) => {

  React.useEffect(() => {
    setSafeCategoryContentAreas(mappedCategoryContentAreas);
    setSafeCategories(mappedCategories);
    setSafeTopics(mappedTopics);
    return function cleanup() {
    };

  }, [resource, mappedTopics, mappedCategories, mappedCategoryContentAreas]);

  const validate = (values: IFormFields) => {
  };

  const onSubmit = async (
    values: IFormFields,
    actions: FormikHelpers<IFormFields>
  ) => {

    await retry(
      async (bail) => {
        try {
          await axios(config);
        } catch (e) {
          const error = e as AxiosError;
          if (
            error.response &&
            (error.response.status === 400 ||
              error.response.status === 401 ||
              error.response.status === 403)
          ) {
            bail(e);
          } else {
            throw e;
          }

      },
      { retries: 3 }
    );

    // then, mutate to refresh cached resource
    mutate(["/api/resource", values.id as string]);    
    
  }; // OnSubmit Ends

  const onReset = (values: IFormFields) => {
    // These are outside the purview of formik so need to manage these manually

  };

  // Formik hook
  const formikBag = useFormik({
    initialValues,
    validate,
    onSubmit,
    onReset,
    enableReinitialize: true,
  });


  return (
    <>
    </>
  );
};