How to get Name in div in react js? - reactjs

Question

Code:-
const [myButtons, setmyButtons] = useState([]);
setmyButtons(response.data.Rundowns);//api using axios
let idx = [];
let [myDivs, setmyDivs] = useState([]);
const handleClick = (val, id) => {
idx.push(id);
console.log(idx);
const newArr = [...flipDivs];
console.log("newA", newArr);
newArr[idx].show = !flipDivs[idx].show;
console.log("flipDivs", flipDivs)
setFlipDivs(newArr);
};
myButtons.map((val, i) =>
`My Div # ${val}`
)
myDivs = [...Array(2).keys()].map(i => `My Div # ${i + 1}`);
const [flipDivs, setFlipDivs] = useState([
...myDivs.map(
(text, id) => ({ id, text, show: false })
)
]);
return (
<div className="allDivs">
<div style={{ color: "white" }}> Fixed Div </div>
{
flipDivs.filter(({ show }) => !!show).map(
({ text, id, show }, idx) => (
<div
key={idx}
className="simpleMargin rightBorder"
style={{ color: "white" }}
>
{text}
</div>
)
)
}
</div>
<div className="buttons">
{myButtons.map((val, id) => {
// console.log("myButtons",val);
return (
<Fragment key={id}>
<button
id={id}
className="simpleMargin"
onClick={() => handleClick(val, id)}
>
{val}
</button>
</Fragment>
)
})}
</div>
)
getting the btn name as according the api I fetch but when i click the button getting the Show in image below:-
when i added the myDivs = myButtons.map(i => ${i});
getting nothing to display
so I want that when I click the button same same will appear in div location.
How can i do that?
I am fetching the button name from api.
Please help.