如何在react-admin中基于另一筛选输入实现联动筛选功能

我正在使用react-admin，尝试为列表添加筛选选项。我的需求是实现按组织和项目筛选列表，由于项目与组织关联，因此我希望仅在选中组织后才启用项目选择框，且选项仅展示与选中组织关联的项目。

现有实现代码 #

const ProjectInputs = () => {
    const { values } = useFormState();
    const translate = useTranslate();
    const classes = useStyles();

    return (
        <ReferenceInput
            label={translate("resources.projects.name", { smart_count: 1 })}
            source="projectId"
            reference="projects"
            filter={{ organizationId: values.organizationId }}
            disabled={!values.organizationId}
            alwaysOn
            variant="standard"
        >
            <SelectInput
                optionText="name"
                resettable
                alwaysOn
            />
        </ReferenceInput>
    );
}

export const PaymentFilter: FC<Omit<FilterProps, 'children'>> = props => {
const classes = useFilterStyles();
return (
    <Filter {...props}>
        <ReferenceInput
            source="organizationId"
            reference="organizations"
            variant="standard"
        >
            <AutocompleteInput
                optionText={(choice?: Organization) =>
                    choice?.id // 空选项为 { id: '' }
                        ? `${choice.name}`
                        : ''
                }
            />
        </ReferenceInput>
        <ProjectInputs />
    </Filter>
);
};

现存问题 #

上述代码可正常运行，但存在以下问题：

• 无法将项目输入框设置为始终显示
• 添加筛选按钮中该输入项无名称，仅显示空白收缩区域
• 项目输入框位置错乱，会突兀弹出
• 选中该筛选条件后无法将其关闭

请问有没有可行的解决方案？该如何修复这些问题？是否需要采用其他思路实现该需求？

问题更新 #

我按照@doctoragon的方案进行了调整，目前功能符合预期：项目输入框不会出现在添加筛选的可选列表中，仅在选中组织时显示，取消选中组织时自动隐藏。

该效果符合我的需求，但第二个输入框仍存在样式异常：该输入框位置比其他所有输入框都偏高，选中选项后取消按钮会被选中内容覆盖。

内容的提问来源于stack exchange，提问作者R H