Javascript 警告：React检测到FormContent Select调用的挂钩顺序发生了更改

我定义了一个selectinputField组件，并在表单中调用它，但有一个错误是：

React检测到FormContent调用的钩子顺序发生了变化

我的SelectInputField

export const SelectCompanyField = () => {
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(10);
const { data, error } = useSWR<ServerResponse, any>(companyUrls.base, url => getDataByParams(companyUrls.base));
console.log("Data", data, "Error", error);
console.log(data?.entities);


return (

    <Select

        showSearch
        placeholder="Choisir une compagnie"
        optionFilterProp="children"
        filterOption={(input, option: any) =>
            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
    >
        {data?.entities.map(d => (
            <option value={d.index} key={d.id}  >
                {d.name}
            </option>
        ))}

    </Select>


);

export const SelectCompanyField=（）=>{
const[page，setPage]=useState（1）；
const[perPage，setPerPage]=useState（10）；
const{data，error}=useSWR（companyUrls.base，url=>getDataByParams（companyUrls.base））；
日志（“数据”，数据，“错误”，错误）；
console.log（数据？实体）；
返回(
option.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
{data？.entities.map（d=>(
{d.name}
))}
);

})

我的表格中有错误的部分

   {firstOptionValue && 
    <Col md={24} lg={24} sm={24}>
                    <div className="ant-form-item">
                        <label className="label">Compagnie <span className="text-danger">*</span></label>
                        <Controller
                            as={SelectCompanyField()}
                            name="company"
                            control={control}
                            defaultValue={""}
                            rules={{ required: false }}
                        />
                        {errors.company && "Company is required"}
                    </div>
 </Col>
}

{firstOptionValue&&
公司*
{errors.company&&“需要公司”}
}

如果firstOptionValue为true，则应显示该列。但是当firstOptionValue为true时，我得到了上面提到的错误

我尝试了另一种方法，即使用firstOptionValue直接调用我的select组件，但当我提交表单时，在select组件输入中选择的值在提交后不会出现在我的数据中，而其他值会出现

备选方案

<Col md={24} lg={24} sm={24}>
          <div className="ant-form-item">
                 <label className="label">Compagnie <span className="text-danger">*</span></label>
{firstOptionValue && <SelectCompanyField/>
                    
                        {errors.company && "Company is required"}
                    </div>

                </Col>

公司*
{firstOptionValue&&
{errors.company&&“需要公司”}

---

谢谢

只需传递组件，不要将其称为：

as={SelectCompanyField}

如何？我必须在哪里传递组件？我引用了您自己的代码，因此，假设

控制器

组件需要

ElementType

，它是组件函数或类，或者是基本HTML标记名的字符串。当我使用

as={SelectCompanyField}

，它向我显示警告：无法为功能组件提供引用。尝试访问此引用将失败。提交后，我的输入没有任何值，这意味着您遇到的问题已得到解决，但您现在正面临。