Components do not change when a hooked element is Changed - reactjs

Question

Currently, the details of the elements which I want to display are saved at Info.js.
Parent.js is responsible for importing the details needed and then injecting them respectively into each Child.js by .map function as the info stored at Info.js is an array.
I want to dynamically display the relative Child component by the button pressed by users. For example, when the user clicked "First-Tier" button at Parent.js, only the Child.js component with the category of "First-Tier" will be shown. At this moment, my code is not working. I believe the problem is at useEffect but I cannot figure out how to fix this.
I am looking forward to receiving your inspirations. Thanks and please stay safe.
---> Parent.js
import React, { useState, useEffect } from "react";
import Info from "./Info";
import Child from "./Child";
let Category = ["All", "First-Tier", "Second-Tier"];
const Parent = () => {
const [categoryChosen, setCategoryChosen] = useState("All");
let PartsShown = [...Info];
useEffect(() => {
PartsShown = [
...PartsShown.filter((e) => e.category[1] === categoryChosen),
];
}, [categoryChosen, PartsShown]);
return (
<div>
<div>
{Category.map((element) => (
<button
style={{ margin: 10 }}
key={element}
onClick={() => setCategoryChosen(element)}
>
{element}
</button>
))}
</div>
<div>{categoryChosen}</div>
<div>
{PartsShown.map((e) => (
<Child
key={e.name}
name={e.name}
category={e.category[1]}
/>
))}
</div>
</div>
);
};
export default Parent;
---> Child.js
import React from "react";
const Child = ({ name, category }) => (
<div style={{ margin: 10 }}>
<h1>{name}</h1>
<p>{category}</p>
<hr />
</div>
);
export default Child;
--> Info.js
const Info = [
{
name: "A",
description: "Description of A ",
category: ["All", "First-Tier"],
},
{
name: "B",
description: "Description of B",
category: ["All", "Second-Tier"],
}
];
export default Info;

Answer 1

import React, { useState } from "react";
import Info from "./Info";
import Child from "./Child";
const Category = ["All", "First-Tier", "Second-Tier"];
const Parent = () => {
const [partsShown, setPartsShownAndCategory] = useState({
partsArray: [...Info],
category: "All"
});
const changeCategory = category => {
const PartsShown = Info.filter(
element =>
element.category[1] === category || element.category[0] === category
);
setPartsShownAndCategory({
...partsShown,
category: category,
partsArray: PartsShown
});
};
console.log(partsShown);
return (
<div>
<div>
{Category.map(element => (
<button
style={{ margin: 10 }}
key={element}
onClick={() => changeCategory(element)}
>
{element}
</button>
))}
</div>
<div>{partsShown.category}</div>
<div>
{partsShown.partsArray.map(e => (
<Child key={e.name} name={e.name} category={partsShown.category} />
))}
</div>
</div>
);
};
export default Parent;