Material ui select doesn't change the UI value

Question

I am in a situation in which something like, I want to initialize my state that contains the value of my material ui select, but I cannot initialize it because it's in the table cell value.

Here is my code:

export const _columns: any = () => {
  const auth: any = useAuth();
  // console.log(auth)
  const theme: any = useTheme();
  const [timezone, setTimezone] = useState<any>(moment.tz.guess());
  const [members, setMembers] = useState<Member[]>([]);

  const [selectedValue, setSelectedValue] = useState(auth.id);

  const ListItemCustom = ({ icon, text }: any) => {
    return (
      <ListItem>
        <ListItemAvatar>
          <Avatar className="tw-bg-[#eaeaea] tw-scale-90">{icon}</Avatar>
        </ListItemAvatar>
        {text}
      </ListItem>
    );
  };

  const handleChangeSelect = (
    event: SelectChangeEvent<unknown>,
    cellRowId: number
  ) => {
    const selectedValue = event.target.value as number;
    personUpdateAssign(cellRowId, selectedValue)
      .then((response) => {
        // Handle the response as needed
        ToastSuccess("Successfully assigned.");
        // console.log("Assignment updated:", response);
      })
      .catch((error) => {
        console.error("Error updating assignment:", error);
      });
  };

  useEffect(() => {
    http
      .get(`${endpoints.TEAM_MEMBERS_ASSIGN}${auth.team}/`)
      .then((response) => {
        setMembers(response.data);
      })
      .catch((error) => {
        console.error("Error fetching team members:", error);
      });
  }, []);

  return useMemo(
    () => [     
      {
        Header: "Assign",
        disableSortBy: true,
        accessor: "assign",
        width: 130,
        minWidth: 130,
        Cell: (cell: any) => {
          return (
            <>            
              <Select
                labelId="demo-simple-select-label"
                id="demo-simple-select"
                value={
                  cell.row.original.assigned_user == null
                    ? selectedValue
                    : cell.row.original.assigned_user
                }                
                label="Assign"
                fullWidth
                onChange={(e) => handleChangeSelect(e, cell?.row?.original?.id)}
              >
                {members && members.length !== 0
                  ? members.map((member: Member, index: number) => {
                      return (
                        <MenuItem value={member.id} key={index}>
                          {member.email}
                        </MenuItem>
                      );
                    })
                  : null}
              </Select>           
            </>
          );
        },
      },
      {
        Header: "Data Available",
        // disableSortBy: false,
        accessor: "data_availability",
        width: 50,
        minWidth: 50,
        Cell: (cell: any) => {
          return (
            <>
              {cell?.row?.original?.got_data ? (
                <IconCircleCheck
                  style={{ color: theme.palette.success.main }}
                  size="20"
                  strokeWidth={3}
                  className=""
                />
              ) : (
                <IconCircleX
                  style={{ color: theme.palette.error.main }}
                  size="20"
                  strokeWidth={3}
                  className=""
                />
              )}
            </>
          );
        },
      },
      {
        Header: "Actions",
        disableSortBy: true,
        accessor: "actions",
        width: 50,
        minWidth: 50,
        Cell: (cell: any) => {
          return (
            <>
              <DeletePerson id={cell?.row?.original?.id}>
                <IconTrash
                  style={{ color: theme.palette.primary.main }}
                  size="16"
                  strokeWidth={3}
                  className=""
                />
              </DeletePerson>
            </>
          );
        },
      },
    ],
    [members]
  );
};

my main problem is the const [selectedValue, setSelectedValue] = useState(auth.id); which is i want this one to be also something initialize the value below which is the cell.row.original.assigned_user

How can I lift the value of this one, so that I can do something like this:

const [selectedValue, setSelectedValue] = useState(cell.row.original.assigned_user == null ? selectedValue: cell.row.original.assigned_user)