This is how I handle ACL in React apps

AclService.tsx

import React, { FC, Fragment } from "react";
import { usePermissions } from "services/rbac";
import { get } from "lodash";

export type AclProps = {
    permission: string;
};

export const AclService: FC<AclProps> = ({ permission, children }) => {
    const { role, permissions } = usePermissions();
    const canPerform = get(permissions, `${role}.${permission}`);
    return <Fragment>{canPerform ? children : null}</Fragment>;
};

atoms.ts

import { atom } from "recoil";

type RoleUnionType = "guest" | "admin" | "user" | "author";

export const roleState = atom<RoleUnionType>({
    key: "roleState",
    default: "guest",
});

permissions.ts

export const permissions = {
    guest: {
        books: {
            read: true,
            create: false,
            update: false,
            delete: false,
            like: false,
        },
        comments: {
            read: true,
            create: true,
            update: false,
            delete: true,
        },
        bookComments: {},
        profile: {
            read: false,
            update: false,
            image: false,
            name: false,
            biography: false,
            username: {
                update: false,
            },
            comments: {
                read: false,
                delete: false,
            },
        },
        publisher: {
            submissionRequest: false,
        },
    },
};

Usage.tsx

import React, { FC } from "react";
/* components */
import { AclService } from "services/rbac";

const Book: FC = () => {
    return (
        <AclService permission="comments.read">
            {/* now  this part is available only if the user has the permission of comments.read in permissions.ts file */}
        </AclService>
    );
};

export default Book;

usePermissions.ts

import { useRecoilState } from "recoil";
import { permissions } from "services/rbac";
import { roleState } from "services/recoil/user/atoms";

export function usePermissions() {
    const [role] = useRecoilState(roleState);
    return {
        permissions,
        role,
    };
}