嗨，我正在尝试添加带有输入ref的材料ui图标按钮来上传图像，但它不起作用

点击此处查看UI的图像HiI正在尝试添加材料UI按钮以上传图像它不起作用下面是代码片段和对沙盒的引用我正在尝试像在图像中一样工作但不起作用我已经去了反应上传和其他方法的参考，我如何在下面的功能代码中添加删除按钮

代码沙箱链接：https://codesandbox.io/s/gallant-hoover-3kjfi?file=/src/App.js

[import React, { useRef, useState } from "react";
import AvatarEditor from "react-avatar-editor";
import Avatar from "@material-ui/core/Avatar";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import Slider from "@material-ui/core/Slider";
import {
Box,
Typography,
Button,
IconButton,
Grid,
Divider,
} from "@material-ui/core";
// import ImageUploading from "react-images-uploading";
export default function Images() {
const [state, setState] = useState({
cropperOpen: false,
img: null,
zoom: 2,
rotate: 0,
croppedImg: "",
});

const editorRef = useRef(null);
const inputRef = useRef(null);
function handleZoomSlider(event, value) {
setState((prev) => ({ ...prev, zoom: value }));
}
function handleFileChange (e) {
const createObjectURL =
(window.URL || window.webkitURL).createObjectURL ||
window.createObjectURL;
const file = e.target.files[0];
// console.log(file);
const image_url = createObjectURL(file);
setState({
tmpPhotoURL: image_url,
file: file,
});
};
//   function handleFileChange(e) {
//     window.URL = window.URL || window.webkitURL;
//     let url = window.URL.createObjectURL(e.target.files[0]);
//     inputRef.current.value = "";
//     setState((prev) => ({ ...prev, img: url, cropperOpen: true }));
//   }
function handleCancel() {
setState((prev) => ({ ...prev, cropperOpen: false }));
}

function handleSave(e) {
if (editorRef.current) {
const canvasScaled = editorRef.current.getImageScaledToCanvas();
const croppedImg = canvasScaled.toDataURL();
setState((prev) => ({ ...prev, cropperOpen: false, croppedImg }));
}
}
return (
<MuiThemeProvider>


<div style={{ height: 100, width: 120 }}>
<Avatar src={state.croppedImg} size={100} />

<Button
//   label="Upload an Image"
//   labelPosition="before"
//   containerElement="label"
size="medium"
variant="contained"

color="secondary"

ref={inputRef}
type="file"
accept="image/*"
onChange={handleFileChange}
>

Upload an Image
</Button>][1]