My input component:
import React from 'react';
import { FormField } from '../FormField';
import styles from './styles.module.css';

const Input = React.forwardRef(
  ({ label, type = 'text', className, value, onChange, error, name }, ref) => {
    return (
      <FormField error={error}>
        <div className={styles.inputWrapper}>
          {label && (
            <label
              htmlFor={name}
              className={styles.inputLabel}
              style={{ marginBottom: 0 }}
            >
              {label}
            </label>
          )}
          <input
            type={type}
            className={`form-control morphfield ${styles.input} ${className}`}
            id={name}
            value={value}
            onChange={onChange}
            ref={ref}
          />
        </div>
      </FormField>
    );
  }
);

export { Input };



my Controller that container the form: 
import React from 'react';
import { Input } from '../../components/Input';
import { useFormContext, Controller } from 'react-hook-form';

import styles from '../styles.module.css';

const INPUTS = [
  { label: 'Firma', id: 'verzeichnis-firma' },
  { label: 'Bezeichnung', id: 'verzeichnis-bezeichnung' },
  { label: 'Zweck', id: 'verzeichnis-zweck' },
];

const Verzeichnis_Step1 = () => {
  const { control, formState } = useFormContext();

  console.log('formState: ', formState);

  return (
    <div className="card-body">
      <div className={styles.verzeichnisInputsWrapper}>
        {INPUTS.map((input) => (
          <Controller
            key={input.id}
            control={control}
            name={`step1.${input.label.toLowerCase()}`}
            rules={{ required: true }}
            defaultValue=""
            render={({ field }) => (
              <Input
                {...input}
                {...field}
                value={field.value}
                onChange={field.onChange}
                error={formState.errors[input.label.toLowerCase()]}
              />
            )}
          />
        ))}
      </div>
    </div>
  );
};

export { Verzeichnis_Step1 };


my form container: 

import React, { useContext, useState } from 'react';
import Navbar from '../components/Navbar';
import AuthContext from '../context/AuthProvider';
import { useNavigate } from 'react-router-dom';
import VerzeichnisProzesse from './components/VerzeichnisProzesse';

import VerzeichnisStart from './components/VerzeichnisStart';
import { VerzeichnisFormular } from './components/VerzeichnisFormular';
import { useForm, FormProvider } from 'react-hook-form';

const generateUniqueId = () => {
  return Math.random().toString(36).substr(2, 6).toUpperCase();
};

const Verzeichnis = () => {
  const { auth, setToken } = useContext(AuthContext);
  const navigate = useNavigate();
  const [activeStep, setActiveStep] = useState(0);

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

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

  const methods = useForm({ mode: 'onChange' });

  const onSubmit = (data) => {
    const formattedData = { ...data, id: generateUniqueId() };
    if (activeStep === 9) {
      const prevData = JSON.parse(localStorage.getItem('verzeichnisData'));
      const newData = prevData ? [formattedData, ...prevData] : [formattedData];

      localStorage.setItem('verzeichnisData', JSON.stringify(newData));
      navigate('/VerzeichnisOverview');
    }
    console.log(data);
  };

  console.log('formValues: ', methods.getValues());

  return (
    <div className="wrapper">
      <div id="content">
        <div className="container">
          <div className="row topmargin100">
            <div className="col-md-2"></div>
            <div className="card col-md-8">
              <FormProvider {...methods}>
                <form onSubmit={methods.handleSubmit(onSubmit)}>
                  {activeStep === 0 && <VerzeichnisStart next={handleNext} />}
                  {activeStep === 1 && (
                    <VerzeichnisProzesse next={handleNext} back={handleBack} />
                  )}
                  {activeStep > 1 && (
                    <VerzeichnisFormular
                      activeStep={activeStep}
                      next={handleNext}
                      back={handleBack}
                    />
                  )}
                </form>
              </FormProvider>
            </div>
            <div className="col-md-2"></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Verzeichnis;



why is validation rules not working? In this case the 'required' is not working. I can submit the form without the fields being filled in