Profile modal skeleton

src/core/components/ProfileButton.tsx

 import { Button } from '@material-ui/core';
 import React, { useState } from 'react';
-import { CustomModal } from './CustomModal';
+import { ProfileModal } from './ProfileModal';
 
 export const ProfileButton = () => {
   const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false);
@@ -14,13 +14,7 @@ export const ProfileButton = () => {
       <Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
         Open Profile
       </Button>
-      <CustomModal
-        isOpen={isProfileModalOpen}
-        setIsOpen={setIsProfileModalOpen}
-        customStyle={{ backgroundColor: 'white', padding: '10px' }}
-      >
-        Modal content
-      </CustomModal>
+      <ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} />
     </div>
   );
 };

src/core/components/ProfileModal.tsx

+import React, { Dispatch, SetStateAction } from 'react';
+import { CustomModal } from './CustomModal';
+
+type Dispatcher<S> = Dispatch<SetStateAction<S>>;
+
+interface IProfileModalProps {
+  isOpen: boolean;
+  setIsOpen: Dispatcher<boolean>;
+}
+
+export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
+  const placeHolder = 'test text';
+  return (
+    <CustomModal
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      customStyle={{ backgroundColor: 'white', padding: '10px' }}
+    >
+      {placeHolder}
+    </CustomModal>
+  );
+};
+
+export default ProfileModal;