我正在从API中获取自动完成选项，它完美地获取到了，并且还显示了从API返回的已选择选项，但我面临的问题是，无论我尝试删除还是添加一个值（类别），它都不会删除或添加。

在线演示Codesandbox

PostInfo.jsx：

import SelectPostsCatsOptions from "../../components/autocomplete/SelectPostsCatsOptions";
import postInfo from "./postInfo.json";
export default function PostInfo() {
  const [categories, setCategories] = useState([]);
  const [selectedCategories, setSelectedCategories] = useState([]);

  useEffect(() => {
    const getPost = async () => {
      try {
        setCategories(postInfo[0].categories);
        setSelectedCategories(postInfo[0].categories);
      } catch (err) {}
    };
    getPost();
  });

  return (
   
    

      <>
        

          

            

              
帖子类别：
              
                  setSelectedCategories(newSelectedCategories)
                }
                value={selectedCategories}
              />
              
已选择的类别：
            
          
 
        
        
    
  );
}

选择PostsCatsOptions：

import categories from "./postsCategories.json";

export default function SelectPostsCatsOptions({
  selectedCategories,
  setSelectedCategories,
  onChange,
  value
}) {
  return (
    

       category.catName}
        options={categories}
        disableGutters
        isOptionEqualToValue={(option, value) =>
          option.catName === value.catName
        }
        renderOption={(props, categories) => (
          

            {categories.catName}
          
        )}
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            
          ))
        }
        renderInput={(params) => (
          
        )}
        value={value}
        onChange={onChange}
      />
    
  );
}

我不知道我在这里漏掉了什么，为什么我不能从自动完成中添加或删除一个标签！