TypeError 中的错误：无法读取 undefined 的属性（读取“name”）

问：

我正在尝试创建一个点击事件，以便能够删除列表中的项目，但是当我单击它时，我收到“TypeError：无法读取未定义的属性（读取'name'）”。

我很确定在某个地方绑定“这个”是要做的事情，但我尝试了很多地方，但它不起作用。

这是我的代码：

import React from "react";
import { useRecoilValue } from "recoil";

import { userProfile } from "../recoil";
import ProfileName from "./components/profileName";

const DetailProfil = () => {
  const profile = useRecoilValue(userProfile);

  return (
    <div>
      <ProfileName
        profilePicture={profile?.profilePicture}
        fullName={profile?.fullname}
        roleDetails={profile?.details.name}
      />

      
    </div>
  );
};

export default DetailProfil;