Is This Possible? How to use single useFieldArray at a time?

[arench]

I'm looking to make a time manager tool, where a user can select a day and record their time, specifying how they spent their time. I'm using react-hook-form to verify the user's input, making sure they enter valid time that doesn't overlap or use too much. However, I'm having trouble rendering the individual day's component.

Essentially, this is a doubly-nested useFieldArray. Each day has zero to many activities, each activity has one to multiple time intervals.

Main Problem
When I make changes to an input, it indeed makes those changes, but you'll notice that the change occurs on all other days as well at the same position. For example: edit one of the inputs on the first day, and then you'll see that change take effect across every day.

I'm pretty certain this is happening in the ActivityPanel.tsx component. Something with how the useFieldArray is being called/setup. Does it need to be reset each time the dayIndex is changed?

Here's a codesandbox that mostly duplicates what I have (I only did the most basic styling in my conversion to codesandbox):
https://codesandbox.io/p/sandbox/rhf-timesheet-8xqjwg?file=%2Fsrc%2Fcomponents%2FActivityPanel.tsx%3A19%2C1

[arench]

I'm not sure if this is the correct answer but I found a way that works. I hate it, but it's the only option I've gotten to work.

Instead of passing the selectedDay down to the ActivityPanel (where it then defines the useFieldArray), I'm rendering all days and hiding all elements that aren't part of the selectedDay.

Surely there'a a better way. I tried running a reset() in the useEffect of the ActivityPanel but I could never get that to do what I wanted. It carried over objects from other days.

If someone know the correct way to do this, please provide your thoughts. I would love to hear them.