diff --git a/src/components/AvatarField.js b/src/components/AvatarField.js
index 32dff83..8e71531 100644
--- a/src/components/AvatarField.js
+++ b/src/components/AvatarField.js
@@ -6,7 +6,17 @@ import { useRecordContext } from "react-admin";
 const AvatarField = ({ source, ...rest }) => {
   const record = useRecordContext(rest);
   const src = get(record, source)?.toString();
-  return <Avatar src={src} {...rest} />;
+  const { alt, classes, sizes, sx, variant } = rest;
+  return (
+    <Avatar
+      alt={alt}
+      classes={classes}
+      sizes={sizes}
+      src={src}
+      sx={sx}
+      variant={variant}
+    />
+  );
 };
 
 export default AvatarField;
diff --git a/src/components/AvatarField.test.js b/src/components/AvatarField.test.js
new file mode 100644
index 0000000..8e815fa
--- /dev/null
+++ b/src/components/AvatarField.test.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { RecordContextProvider } from "react-admin";
+import { render, screen } from "@testing-library/react";
+import AvatarField from "./AvatarField";
+
+describe("AvatarField", () => {
+  it("shows image", () => {
+    const value = {
+      avatar: "foo",
+    };
+    render(
+      <RecordContextProvider value={value}>
+        <AvatarField source="avatar" />
+      </RecordContextProvider>
+    );
+    expect(screen.getByRole("img").getAttribute("src")).toBe("foo");
+  });
+});