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

src/container/signup/index.tsx

@@ -1,12 +1,8 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
+import {Button, TextField, Grid, Box,
-import Button from '@mui/material/Button';
+  Typography, Container
-import CssBaseline from '@mui/material/CssBaseline';
+} from '@mui/material';
-import TextField from '@mui/material/TextField';
+import Photo from './photo/photo';
-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 { 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;
+  const handlePhotoChange = (photo) => {
-    fileInput.click();
+    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 }}/>
+              <Photo defaultPhoto={student_icon} onPhotoChange={handlePhotoChange} />
-                <input
-                  type="file"
-                  name="image"
-                  accept="image/*"
-                  onChange={handleAvatarChange}
-                  style={{ display: 'none' }}
-                  id="avatar-input"
-                />
               </Grid>
               <Grid
                 container

src/container/signup/photo/photo.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import Avatar from "@mui/material/Avatar";
+
+const PhotoStyled = styled.div`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+`;
+
+const AvatarStyled = styled(Avatar)`
+  width: 200px;
+  height: 200px;
+`;
+
+const InputStyled = styled.input`
+  display: none;
+`;
+
+function Photo({ defaultPhoto, onPhotoChange }) {
+  const [photo, setPhoto] = useState(defaultPhoto);
+
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        const newPhoto = e.target.result;
+        setPhoto(newPhoto);
+        if (onPhotoChange) onPhotoChange(newPhoto); 
+      };
+
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleAvatarClick = () => {
+    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
+    fileInput.click();
+  }
+
+  
+  return (
+    <PhotoStyled>
+      <AvatarStyled
+        src={photo}
+        alt="Выберите фотографию"
+        onClick={handleAvatarClick}
+       />
+      <InputStyled
+        id="fileInput"
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+      />
+    </PhotoStyled>
+  );
+  
+}
+
+export default Photo;