NextJS with Chakra-UI Checkbox managing display of text

I'm fighting my way through learning nextjs, postgre, react query etc. Have managed to write my basic structure in nextjs using chakra components, but as I never dealt with programming before I got quite some problems with react-query to fetch supabase data etc.

Right now I'm stuck with a checkbox problem.

I structured all of my page parts into single components.

Now I want to hide text in the lower part of the code until the corresponding checkbox in the upper part has been selected. I managed to setup a "checkboxCheck" component in the corresponding part which hides the text, but creates a separate checkbox at the spot where it is needed. this should be triggered at a very different spot (much earlier).

checkboxes are setup in line 44-48, triggered text is in line 161 and following.

I guess I need to set a class or sth for the checkbox and wrap it around the function, but I don't get it what to do exactly. Maybe someone can help me please?!

I read a lot of different threads, but wasn't able to find what I need.