функционал загрузки фотографии вынесен в отдельный блок

src/container/signup/index.tsx

@@ -1,12 +1,8 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
+import {Button, TextField, Grid, Box,
+  Typography, Container
+} from '@mui/material';
+import Photo from './photo/photo';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import axios from 'axios';
 import student_icon from './student-icon.png';
@@ -22,7 +18,7 @@ const theme = createTheme();
 
 
 const SingUpPage = (): React.ReactElement => {
-  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [selectedPhoto, setSelectedPhoto] = useState(null);
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
   const handleChange = (selectedOption) => {
     setSelectedOption(selectedOption);
@@ -48,28 +44,14 @@ const SingUpPage = (): React.ReactElement => {
     onClose();
   };
   */
-  const handleAvatarClick = () => {
-    const fileInput = document.getElementById('avatar-input') as HTMLInputElement;
-    fileInput.click();
+
+  const handlePhotoChange = (photo) => {
+    setSelectedPhoto(photo); // Сохраняем выбранное изображение
   };
 
-  const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files[0];
-    const reader = new FileReader();
-
-    reader.onload = () => {
-      setAvatarUrl(reader.result as string);
-    };
-
-    reader.readAsDataURL(file);
-  };
-
-
-
   return (
     <ThemeProvider theme={theme}>
       <Container component="main" maxWidth="xs">
-        <CssBaseline />
         <Box
           sx={{
             marginTop: 8,
@@ -124,15 +106,7 @@ const SingUpPage = (): React.ReactElement => {
                 justifyContent="center"
                 sx={{ paddingTop: 7, paddingLeft: 3 }}
               >
-                <Avatar src={avatarUrl || student_icon} onClick={handleAvatarClick} sx={{ width: 200, height: 200 }}/>
-                <input
-                  type="file"
-                  name="image"
-                  accept="image/*"
-                  onChange={handleAvatarChange}
-                  style={{ display: 'none' }}
-                  id="avatar-input"
-                />
+              <Photo defaultPhoto={student_icon} onPhotoChange={handlePhotoChange} />
               </Grid>
               <Grid
                 container