fix: radio and list sort init

src/components/Hero.tsx

@@ -80,7 +80,11 @@ export default function Hero() {
           />
         )}
         renderOption={(props, option) => (
-          <Box component="li" {...props} onClick={() => navigate(option.path)}>
+          <Box
+            component="li"
+            {...props}
+            onClick={() => navigate('/' + option.path)}
+          >
             <Box>
               <Typography fontWeight={'bold'}>{option.name}</Typography>
               <Typography fontSize={12}>{option.shortDescription}</Typography>

src/components/options/RadioWithTextField.tsx

@@ -3,34 +3,31 @@ import React from 'react';
 import TextFieldWithDesc from './TextFieldWithDesc';
 import SimpleRadio from './SimpleRadio';
 
-const RadioWithTextField = <T,>({
-  fieldName,
-  radioValue,
+const RadioWithTextField = ({
   title,
-  onRadioChange,
+  onRadioClick,
+  checked,
   value,
   description,
   onTextChange,
-  typeDescription
+  radioDescription
 }: {
   fieldName: string;
   title: string;
-  radioValue: T;
-  onRadioChange: (val: T) => void;
+  checked: boolean;
+  onRadioClick: () => void;
   value: string;
   description: string;
   onTextChange: (value: string) => void;
-  typeDescription?: string;
+  radioDescription?: string;
 }) => {
-  const onChange = () => onRadioChange(radioValue);
   return (
     <Box>
       <SimpleRadio
-        value={radioValue}
-        onChange={onChange}
-        fieldName={fieldName}
+        checked={checked}
+        onClick={onRadioClick}
         title={title}
-        description={typeDescription}
+        description={radioDescription}
       />
       <TextFieldWithDesc
         value={value}

src/components/options/SimpleRadio.tsx

@@ -1,39 +1,31 @@
-import { Box, Stack } from '@mui/material';
-import { Field } from 'formik';
+import { Box, Radio, Stack } from '@mui/material';
+import { Field, useFormikContext } from 'formik';
 import Typography from '@mui/material/Typography';
-import { globalDescriptionFontSize } from '../../config/uiConfig';
 import React from 'react';
+import { globalDescriptionFontSize } from '../../config/uiConfig';
 
 interface SimpleRadioProps {
-  onChange: () => void;
-  fieldName: string;
-  value: any;
   title: string;
   description?: string;
+  checked: boolean;
+  onClick: () => void;
 }
 
-export default function SimpleRadio({
-  onChange,
-  fieldName,
-  value,
+const SimpleRadio: React.FC<SimpleRadioProps> = ({
+  onClick,
   title,
-  description
-}: SimpleRadioProps) {
+  description,
+  checked
+}) => {
   return (
     <Box>
       <Stack
         direction={'row'}
         sx={{ mt: 2, mb: 1, cursor: 'pointer' }}
-        onClick={onChange}
         alignItems={'center'}
-        spacing={1}
+        onClick={onClick}
       >
-        <Field
-          type="radio"
-          name={fieldName}
-          value={value}
-          onChange={onChange}
-        />
+        <Radio checked={checked} onClick={onClick} />
         <Typography>{title}</Typography>
       </Stack>
       {description && (
@@ -43,4 +35,6 @@ export default function SimpleRadio({
       )}
     </Box>
   );
-}
+};
+
+export default SimpleRadio;

src/components/options/TextFieldWithDesc.tsx

@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 
 type OwnProps = {
-  description: string;
+  description?: string;
   value: string | number;
   onChange: (value: string) => void;
   placeholder?: string;
@@ -24,9 +24,11 @@ const TextFieldWithDesc = ({
         onChange={(event) => onChange(event.target.value)}
         {...props}
       />
-      <Typography fontSize={12} mt={1}>
-        {description}
-      </Typography>
+      {description && (
+        <Typography fontSize={12} mt={1}>
+          {description}
+        </Typography>
+      )}
     </Box>
   );
 };