How to display an error message with react hook form in a useFieldArray

Language used : I am using javascript with react, react hook form and material ui

What i want to do : I am trying to handle an error message if onSubmit my value is empty.

Problematic : my input is in an array of multiple object, so I cannot access the errors.
({${fieldArrayName}.${index}.os})

import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from '@mui/material';
import React from 'react';
import { ErrorMessage } from '@hookform/error-message';
import { Controller } from 'react-hook-form';

export const Os = ({ fieldArrayName, index, register, control, errors }) => {
  return (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Os</InputLabel>
      <Controller
        name={`${fieldArrayName}.${index}.os`}
        control={control}
        defaultValue=""
        rules={{ required: true }}
        render={({ field }) => (
          <Select
            {...field}
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            label="Os"
          >
            <MenuItem value="windows">Windows</MenuItem>
            <MenuItem value="linux">Linux</MenuItem>
          </Select>
        )}
      />{' '}
      <FormHelperText error={true}></FormHelperText>
    </FormControl>
  );
};

What I have tried :

• Instead of using "controller", I have tried to use "register" with required and a message

• Trying to access the name in errors with someting like {errors[fieldArrayName[index].os].message} but of course not woking

• Trying to introduce ErrorMessage from hookForm but got ‘Cannot read properties of null (reading ‘formState’)’

  <ErrorMessage errors={errors} name={${fieldArrayName}.${index}.os} />

>Solution :

I would do it in this way

you can try this destructuring

<Box>
          <Controller
            name={`${fieldArrayName}.${index}.os`}
            control={control}
            defaultValue=""
            rules={{
              required: {
                value: true,
                message: 'os is required',
              },
            }}
            render={({ field: { value, onChange }, fieldState: { error } }) => (
                <TextField
                  id="form-input-division"
                  variant="outlined"
                  select
                  error={Boolean(error)}
                  helperText={Boolean(error) && error?.message}
                  value={value || 'default'}
                  onChange={(e) => {
                    onChange(e.target.value);
                  }}
                >
                  <MenuItem value="windows">Windows</MenuItem>
                  <MenuItem value="linux">Linux</MenuItem>
                  ))}
                </TextField>
            )}
          />
</Box>