Best way to design/implement Google Drive's group folders/sharing features?

I'm trying to think about the best way to design a shared folder feature for my website (React + Firebase) similar to Google Drive/Pinterest. Users should be able to create a new folder and either at creation or afterwards be able to add other users to have edit permissions (to add or delete products from the folder) in the shared folder.

My website currently lets users create their own folders that all other users can view but only the user who created the folder can edit it. In Firebase, each user is mapped by their email address and under this email address, we have a field called folders, an array storing the following object fields, createdAt (JavaScript timestamp), id (a uuidv4), isSelected (boolean to change the folder's CSS style if selected), and the title (folder name).

We also have a list of product objects in our database where there is a userID field which is the email address of the user who has saved the product under their account. When a user comes to our website, we filter for all products where the userID field equals the user’s email address, giving us the user’s products. By default when the user comes to our website, they are in their “All products” folder, and have a list of their other folders they can click on. After they click another folder, we then filter the user’s products to show only those that belong to the selected folder’s contents by checking if a product’s folder field is equal to the title field of the selected folder.

Is there an easy way to extend the current design we have to also have the shared folder feature? How would this differ from the most optimal design?

I’m struggling a bit to think of the correct design pattern and database design. Right now each user’s folders are under their “user” document in the database, but I think it needs to be pulled out so I will need to create a new collection in my Firebase database. In this collection, each document has a uuidv4 as the key and one of the fields is an array of users’ email addresses to store who has edit access. When a user first creates a new folder, we still add the folder object I defined above to the list of folder objects in their “user” document, but we also need to create a new uuidv4 in the folders collection and initialize the list of users with edit access to include this user. Then when the folder creator adds another person to the folder, we add that new person’s email address to the list of users with edit access by indexing for that folder with the given folder’s uuidv4.

The above design makes sense to me in terms of letting users have shared folders but I’m having difficulty thinking about how to ensure that products are handled properly since right now since the userID field of each product is only a specific user’s email address. If I change this to an array of user email addresses, I can no longer easily filter for which products belong to which user when a user logs into our website.

Any help in thinking about how to improve this design is greatly appreciated. Thank you!