How to set retrived checkbox value checked and others unchecked?

I have some posts in my database I'm trying to retrieve and edit posts. The posts had some categories which I set as a checkbox. Well, I've retrieved a single post by id successfully but the problem is I also retrieved the categories and I want to show them as checked not all of them only those ones which are set for that particular post. I have another problem I cannot check the box anymore and am not able to add another category to the category list. Help me!

Here is the Edit Post page

 import React, { useEffect, useState } from 'react';
    import { Alert, Button, Card, Container, Form } from 'react-bootstrap';
    import ReactMarkdown from 'react-markdown';
    import { useDispatch, useSelector } from 'react-redux';
    import { toast, ToastContainer } from 'react-toastify';
    import { listCategory } from '../actions/categoryActions';
    import { listPostDetails, updatePost } from '../actions/postActions';
    
    const EditPost = ({ history, match }) => {
      const postId = match.params.id;
    
      const [categories, setCategories] = useState([]);
    
      const dispatch = useDispatch();
    
      const categoryList = useSelector((state) => state.categoryList);
      const { categories: cateList } = categoryList;
    
      const postDetails = useSelector((state) => state.postDetails);
      const { post } = postDetails;
    
      useEffect(() => {
        if (!userInfo) {
          history.push('/login');
        }
    
        dispatch(listCategory());
    
        if (!post || post._id !== postId) {
          dispatch(listPostDetails(postId));
        } else {
          setCategories(post.categories);
        }
      }, [dispatch, history, userInfo, post, postId, categories]);
    
      
    
      const submitHandler = (e) => {
        e.preventDefault();
        dispatch(updatePost(title, desc, img, categories));
        history.push('/my_posts');
      };
    
      return (
        <div className=" createPost mt-4 py-4">
          <ToastContainer />
          <Container>
            <h2>EDIT POST</h2>
            <Form onSubmit={submitHandler}>
<Form.Group controlId="category" className="mb-2">
            <Form.Label>Select Categories</Form.Label>
            <br />
            {cateList?.map((cate) => (
              <Form.Check
                inline
                key={cate._id}
                type="checkbox"
                label={cate.name}
                onChange={(e) => {
                  if (e.target.checked) {
                    setCategories([...categories, cate.name]);
                  } else {
                    setCategories(
                      categories?.filter((cat) => cat !== cate.name)
                    );
                  }
                }}
              />
            ))}
          </Form.Group>
               <Button
                type="submit"
                variant="success"
                style={{ letterSpacing: '2px', fontWeight: 'bold' }}>
                CREATE
              </Button>
            </Form>
          </Container>
        </div>
      );
    };
    
    export default EditPost;