Not able to apply my filters only for those 2 dropdowns why?

I can filter my data by clicking on the checkboxes inside my dropdowns except for those 2: comments and types.
I think it’s because for comments, I have an integer that needs to be converted into string. The second one, i don’t know how to deal with. If I choose to filter by small it means display data where small:1, same logic for tall and medium.

export default function Display() {
const { menuId } = useParams();
const [menus, setMenus] = useState([]);
…

const [comments, setComments] = useState([
{ label: “1”, value: “1”, name: “1”, selected: false },
{ label: “2”, value: “2”, name: “2”, selected: false },
{ label: “3”, value: “3”, name: “3”, selected: false }
]);

const [types, setTypes] = useState([
{ label: “medium”, value: “medium”, name: “Medium”, selected: false },
{ label: “tall”, value: “tall”, name: “Tall”, selected: false },
{ label: “small”, value: “small”, name: “Small”, selected: false }
]);

useEffect(() => {
axios.post(“”, {menuId:parsInt{menuId}) //not my real url
.then((res) => {
const menus = res.data.menus;
setMenus([
…menus.filter((i) => i.status === “Good”),
…menus.filter((i) => i.status !== “Good”)
]);
})
.catch((err) => {
console.log(err);
});
}, [menuId]);

const matchDdata = menus.filter(({ id }) => {
return !apply[id];
});

const filters = matchData.filter((menus) => {
const allComments = comments.every((i) => i.selected === false);
const optionComments = comments
.filter((entity) => entity.selected)
.map(({ value }) => value.toString());

const allTypes = types.every((i) => i.selected === false);
const optionTypes = types
.filter((entity) => entity.selected)
.map(({ value }) => value);

const isSelComments =
allComments || optionComments.indexOf(menus.comments) >= 0;
const isSelTypes = allTypes || optionTypes.indexOf(menus.types[0]) >= 0;
return (isSelComments && isSelTypes);});

const reset = (list) =>
list.map((e) => ({
…e,
selected: false
}));

const cancel = () => {
setComments(reset(comments));
setTypes(reset(types));
};

const data = [
{
Header: “id”,
accessor: (row) => row.id
},
…
];

return (
<div >
<div>
<Button onClick={cancel}>cancel</Button>
</div>

<div>
<Drop
placeholder={“Types”}
items={types}
onSelect={dropSelection(setTypes)}
hasAll
/>
<Drop
placeholder={“Comments”}
items={comments}
onSelect={dropSelection(setComments)}
hasAll
/>
</div>
<Table
data={filters}
columns={data}
/>
</div>
);
}

Here is my json from my api for menuId:1:

[
{
“id”: “Menu1”,

“name”: “Pea Soup”,
“description”: “Creamy pea soup topped with melted cheese and sourdough croutons.”,
“types”: [
{
“small”: 0,
“tall”: 1,
“medium”:0
}
],
“taste”: “Good”,
“comments”: 3,
“price”: “Low”,
“status”: “Pending”,
“apply”: 1
},
…
]