'SVG element in list, when I hide the first parent, all of next SVG in each section will be hidden too, but not the container

I face a strange bug with Next. With getServerSideProps, I made a request to my api folder, this result a simple JSON. All is good.

I display the content perfectly, no problem.

I put on the parent element a onClick attribute, who call a function of my main file No problem, all is good too.

But, in this function, I ask to hide the children of the global element. It works, but, when it's the first occurence of the list, all others SVG in the list get hidden too, but in fact, in CSS, nothing appears.

Do you know why ?

I post with this a Vercel link, GitHub repo, and screens.

I solved this, by changing the SVG element, with a <Image/> element... But it's not clean...

Vercel Link : Vercel

GitHub Repo : GitHub

Screen 1
Initial

Screen 2
Click on first element

Screen 3
Click on second element



Solution 1:[1]

A quick fix, but isn't clean for me... Replace svg component by ... And it's work. Maybe a bug with id on SVG elements.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MisterSalva