Updating a list in React / GraphQL

I am creating a function that enables an admin to manage which items would be added to the dashboard list of items, He can add/remove items from a list in settings to the actual list in dashboard.

I added the following code in Settings.js:

import { dashboardList } from './Dashboard';

  const dashboardItems = [
  'manual',
  'news',
  'notifications',
  'Letters',
  'Favorites',
  'new item',
 ];



const DashboardItemsSettings = (props) => {
  const { t } = useTranslation('settings');
  const [isActive, setIsActive] = useState({
    manual: true,
    news: true,
    notifications: true,
    letters: true,
    Favorites: true,
    new: false,
  });



  const handleClick = () => {
      setIsActive(!isActive); 
    };

  
  return (
    <>
    <Grid.Row>
      <Grid.Col>{props.children}</Grid.Col>
      <Grid.Col xs="3"> 
        <Can I="manage" A="organisation">
        <SideMenu className='dashboard-settings'> 
          <SideMenu.Item>
             <SideMenu.Header>{t('Dashboard Settings')}</SideMenu.Header>
          </SideMenu.Item>
          {dashboardItems.map((dashboardItem) => (
          <SideMenu.Item key={dashboardItem}>
           {t(dashboardItem)}  < Switch 
        onClick={() => {
          setIsActive(s => ({ 
            ...s, 
            [dashboardItem]: !s[dashboardItem]
          }))
          if (!dashboardList.includes(dashboardItem)) {
            dashboardList.push(dashboardItem);}
        }}
      
        status={isActive[dashboardItem] ? 'active' : 'inactive'}
        />
          </SideMenu.Item>
           ))}
        </SideMenu>
        </Can>
       </Grid.Col>
    </Grid.Row>
    </>
  );

};

New item is being added to the dashboardList but is gone after refresh! I don’t want to save the list in localStorage but in database, preferably using relay/Graphql. I have a GraphQL schema but can’t go further to update the list permanently for that specific user.

I already have a query and graphgl mutation in dashboard.js which keeps the default items already in dashboardList in database, but I also want the new item to be added from settings.

in dashboard.js:

 const dashboardList = [
      'manual',
      'news',
      'notifications',
      'Letters',
      'Favorites',
     ];

const query = graphql`
  query DashboardQuery {
    currentMember {
      dashboardSettings
      id
      user {
        # eslint-disable-next-line relay/unused-fields
        databaseId
        name
      }
      ...ResponsiveGridFragment_member
    }
    deviationTypes {
      deviationType
    }
  }
`;

export const mutation = graphql`
  mutation DashboardMutation($input: UpdateMemberInput!) {
    updateMember(input: $input) {
      member {
        dashboardSettings
      }
    }
  }
`;



const Dashboard = (props) => {

  const { currentMember, deviationTypes } = usePreloadedQuery(query, props.prepared.dashboardQuery);
  const [commit, isInFlight] = useMutation(mutation);
  const [editDashboard, setEditDashboard] = useState(false);
  const [dashboardSettings, setDashboardSettings] = useState(currentMember.dashboardSettings || initialState);

  const onClickEditDashboard = () => {
    setEditDashboard(true);
    onClose();
  };

  const onClickToggle = (card, isActive) => {
    const numberOfColumns = dashboardSettings.numberOfColumns;
    const tempCol = [...dashboardSettings[numberOfColumns]];

    let newColumns = [...tempCol];
    let newDashboardSettings = {};

    if (isActive) {
      const smallestLength = tempCol.sort((a, b) => a.length - b.length)[0].length;
      let cardPlaced = false;

      newDashboardSettings = {
        ...dashboardSettings,
        [numberOfColumns]: newColumns.map((nc) => {
          if (nc.length <= smallestLength && !cardPlaced) {
            cardPlaced = true;
            return nc.concat(card);
          } else {
            return nc;
          }
        }),
      };
    } else {
      newDashboardSettings = {
        ...dashboardSettings,
        [numberOfColumns]: newColumns.map((nc) => nc.filter((c) => c !== card)),
      };
    }

    const input = {
      id: currentMember.id,
      dashboardSettings: newDashboardSettings,
    };
   
    
   commit({ variables: { input } });
    setDashboardSettings(newDashboardSettings);
  };

  const onSave = () => {
    saveAndClose({ id: currentMember.id, dashboardSettings });
  };

  const onColumnChange = ({ currentTarget: { name, value } }) => {
    saveAndClose({
      id: currentMember.id,
      dashboardSettings: { ...dashboardSettings, numberOfColumns: value },
    });
  };

  const saveAndClose = (input) => {
    commit({ variables: { input } });
    setDashboardSettings(input.dashboardSettings);
    setEditDashboard(false);
    onClose();
  };

  return (....)