How to update useReducer

I am using NextJS and Material-UI. I want to create a slider, where I can choose name or name2. I created a sendbox for better unterstanding: here. I cant move my slider in the moment. I dont`know, what is actually the problem there.(renderdatatype component )

Also I dont know how do update for the type slider the state.(FormComponent) I am using useReducer for the react hook.

this is my slider:

 case "Slider":
            return (
                 <Grid item xs={12} md={12} lg={12}>
                    <Slider
                        max={0}
                        max={100}
                        step={50}
                        value={value}
                        onChange={onChange}
                        aria-labelledby="discrete-slider-custom" 
                        />
                    <div style={{display: "flex", justifyContent: "space-between"}}>
                        <Typography>
                        {name}
                        </Typography>
                        <Typography >
                        {name2}
                        </Typography>
                    </div>  
                    
                </Grid>
            );

const handleReducer = (state, action) => {
   
    switch (action.type) {
      case "Checkbox":
        state[action.index].options[action.innerIndex].value = !state[action.index].options[action.innerIndex].value;
        return [...state];
      case "Slider":
        state[action.index].options[action.innerIndex].value = 70;
        return [...state];
      case "TextField":
        // Manipulate text input state 
        return [...state];
      case "Rating":
        // Manipulate rating state
        return [...state];
      default:
        return state;
    }
  };

 const Form = ()  => {

    const [activeStep, setActiveStep] = useState(0);
    const [jobData, dispatchjobData] = useReducer(handleReducer,jobdata.softwareentwicklerfields);
    const [personaltyData, dispatchPersonaltyData] = useReducer(handleReducer,personalty.personaltyfields);
    const [contactData, dispatchcontactData] = useReducer(handleReducer, contact.contactfields);

    const handleNext = () =>{
      setActiveStep(prevActiveStep => prevActiveStep + 1)
    };

    const handleBack = () => {
      setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    //Handle fields change for checkboxes
    const handleChange = useCallback(
      (index, innerIndex, type, value) => {
        console.log("handleChange");
        console.log("value", value);
        switch (activeStep) {
          case 0:
            dispatchjobData({index, innerIndex,type, value });
            break;
          case 1:
            dispatchPersonaltyData({index, innerIndex, type, value});
            break;
          case 2:
            dispatchcontactData({ index, innerIndex, type, value  });
            break;
          default:
            return null;
        }
      },
      [activeStep]
    );