ReactJS, Material UI component and code organization
Your file structure is okay, though it is not the "conventional" react folder structure. I personally like your approach better than having lots of nested folders with index.js but this is because my workflow relies on searching files by name, and searching for index.js is impossible — you always have to search by file. 


  One quick question: the component src/components/body/UserProfile/UserWorks.js is reused in src/components/body/UserWork/UserWork.js; is it ok to leave them with this structure?


As I understand, UserWorks is some component that shows some sort of preview of works; I think that the structure should be the other way around, UserProfile should depend on UserWorks not the other way around. You might even structure it explicitly that UserProfile and UserWork pages (components) depend on a representation component UserWorks, though naming becomes a bit cumbersome. 

Note on using export default

It seems to be standard "good" practice to use export default in Javascript, but I personally don't like it for various reasons and one of them shows in UserWork: you are importing UserWorks as UserRelatedWorks this suggests that UserWorks is used with different intention that is originally designed. Named imports would not eliminate this issue completely but would at least force explicit statement import {UserWorks as UserRelatedWorks} from … 

Comments on the code:


lots of unnecessary empty lines, this is a bit unusual. In most cases empty lines are used to group statements together, here they appear to be random and make code harder to read.
you are using classes for div.bio but not for Skeleton though those styles are repeated but bio is not (or should not be) 
no matter value of loading you are returning a container with &lt;div className={classes.bio}&gt;, you can return container and resolve content inside of it based on the loading to avoid duplication.




In this code filter method is used incorrectly, the callback should return boolean but in this case returns the object itself or null, this relies on implicit type casting to truthy value and is very confusing

          works.filter(w =&gt; {

            if ((!category) || (category === "all")) {
              return w;
            }
            else {
              if (w.category_list.includes(category)) return w;
            }

            return null;

          })


this code should be 

works.filter(work =&gt; !category || category === 'all' || w.category_list.includes(category))