how to store multiple foreign keys in field of a model

###---------------------------------------------------------------------------models.py--------------------------

#MainCategory

class MainCategory(models.Model):
    maincategoryname = models.CharField(max_length=70, blank=False, default='')
    icon = models.ImageField(upload_to='static/')

#Brand

class Brand(models.Model):
    maincategories = models.ManyToManyField(MainCategory)  
    brandname = models.CharField(max_length=70, blank=False, default='')
    icon = models.ImageField(upload_to='static/')

###---------------------------------------------------------------------serializer.py------------------------------


class MainCategorySerializer(serializers.ModelSerializer):

    class Meta:
        model = MainCategory
        fields = '__all__'  # or ('id','maincategoryname','icon')

#BrandSerializer

class BrandSerializer(serializers.ModelSerializer):

    class Meta:
        model = Brand
        fields = '__all__'

###-------------------------------------------------------------------views.py------------------------------


from django.http.response import JsonResponse
from sevenshadesapp.models import Brand
from sevenshadesapp.serializer import BrandSerializer
from rest_framework.decorators import api_view

# Create your views here.
@api_view(['GET','POST','DELETE'])
def Brand_Submit(request):
    
    try:
        if request.method=='POST':
            brand_serializer=BrandSerializer(data=data) 
            print("qqqqqqqqqq",brand_serializer)
        if(brand_serializer.is_valid()):  
            brand_serializer.save()      
            return JsonResponse({"message":'Brand Submitted Successfully',"status":True},safe=False) # safe=False means safety removed, no restrictions
          
        else:
            return JsonResponse({"message":'Fail To Submit',"status":False},safe=False)
    
    except Exception as e:
        print("Error submit:",e)
        return JsonResponse({"message":'Fail To Submit Brand',"status":False},safe=False)


Maincategory Table
(id,     maincategoryname,       icon)                     ====>  id=>primary key

(1,           MEN,                         men.png)
(2,           WOMEN,                   women.png)
(3,           KIDS,                         kids.png)

Brand Table
(id,         brandname ,                    icon,               maincategoryIDs)

(1,           Kelvin Clein,                    ck.png,           1,2)
(2,          Nike,                               nik.png,           1,3)
(3 ,         Tommy Hilfiger,               th.png,              1)

  here id=>primary key    maincategoryIDs=>foreign key

 
How to do that so that we can store multiple foreign keys in "maincategoryIDs" field of 'brand' model? Is it possible in Django or not Please let me know?

NOTE : here I am using Django Restf Framework , and data in request is coming from REACT INTERFACE.
# React js Form for Brand model


import * as React from 'react';
import { Grid, TextField, Button, Avatar } from "@mui/material";
import { useState, useEffect } from "react";
import { useStyles } from "./CategoryCss";
import TitleComponent from "../components/admin/TitleComponent";
import { postData } from "../../services/FetchDjangoApiService";
import Swal from "sweetalert2";
import listimage from "../../images/list.png"
import iconimage from "../../images/icon.png"
import { getData } from "../../services/FetchDjangoApiService";
import Checkbox from '@mui/joy/Checkbox';

export default function Brand(props) {
    var classes = useStyles()
    const [brandName, setBrandName] = useState('')
    const [icon, setIcon] = useState({ file: iconimage, bytes: '' }) //bytes is used to save Image
    const [formError, setFormError] = useState([{ icon: false }])
    const [mainCategoryList, setMainCategoryList] = useState([])
    const [mainCategoryCheckedIds, setMainCategoryCheckedIds] = useState([])
    const mainCategoryGridLength = 12 / mainCategoryList.length;

    const fetchAllMainCategory = async () => {
        var result = await getData('maincategory_list')
        console.log("r", result.data)   //for testing 
        setMainCategoryList(result.data)

    }
    useEffect(function () {
        fetchAllMainCategory()

    }, [])
    
    const handleCheckboxChange = (event) => {
        const index = mainCategoryCheckedIds.indexOf(event.target.value)
        if (index === -1){
            setMainCategoryCheckedIds([...mainCategoryCheckedIds, event.target.value])
        }
        else {
            setMainCategoryCheckedIds(mainCategoryCheckedIds.filter((mainCategoryCheckedId)=>mainCategoryCheckedId !== event.target.value))
        }
        
    };
    
    const handleCheckbox=()=>{
        return mainCategoryList.map((item, index)=>{
            return <Grid item xs={mainCategoryGridLength}>
                <Checkbox
                checked={mainCategoryCheckedIds.includes(`${item.id}`)} /*--->not necessary*/
                onChange={handleCheckboxChange}
                value={item.id}
                style={{ '& .MuiSvgIcon-root': { fontSize: 50 } }}
                label={item.maincategoryname}
            />
            </Grid>
        })
    }


    const handleChange = (event) => {
        setIcon({ file: URL.createObjectURL(event.target.files[0]), bytes: event.target.files[0] })
        handleError(false, "icon")
    }

    const handleError = (errormessage, label) => {  //prev means previous value of error
        setFormError((prev) => ({ ...prev, [label]: errormessage }))
    }

    const handleClick = async () => {
        var err = false
        if (mainCategoryCheckedIds.length == 0) {
            err = true
        }
        if (brandName.length == 0) {
            handleError("Please input brand", "brandname")
            err = true
        }

        if (icon.bytes.length == 0) // icon named image is already exist so we have to work on bytes
        {
            handleError("Please select some icon", "icon")
            err = true
        }

        if (err == false) {
            var formData = new FormData()
            formData.append('maincategories', mainCategoryCheckedIds.map(Number).sort((a,b)=>a>b?1:-1))
            console.log("Checked Ids",mainCategoryCheckedIds.map(Number).sort((a,b)=>a>b?1:-1))
            formData.append('brandname', brandName)
            formData.append('icon', icon.bytes)
            var result = await postData('brand_submit', formData)
            if (result.status) {
                Swal.fire({
                    title: "The Seven Shades",
                    text: result.message,
                    icon: "success",
                    toast: true
                });
            }
            else {
                Swal.fire({
                    title: "The Seven Shades",
                    text: result.message,
                    icon: "error",
                    toast: true
                });
            }
        }
    }

    return (<div className={classes.root}>
        <div className={classes.main_brand_banner_box}>
            <Grid container spacing={2}>
                <Grid item xs={12}>
                    <TitleComponent width={100} title={'Brand'} listicon={listimage} link={'/admindashboard/displaybrand'} />
                </Grid>

                <Grid item xs={12}>
                    <div style={{ fontSize: 20, fontWeight:'bold', marginLeft:10 }}>Choose Main Category</div>
                </Grid>

                {handleCheckbox()}


                <Grid item xs={12}>
                    <TextField error={formError.brandname} helperText={formError.brandname} onFocus={() => handleError(false, 'brandname')} onChange={(event) => setBrandName(event.target.value)} fullWidth label="Brand Name" />
                </Grid>

                <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
                    <Button variant="contained" component='label'>
                        Upload Icon
                        <input type="file" hidden accept="images/*" onChange={handleChange} />
                    </Button>
                    {formError.icon ? <div style={{ fontFamily: '"Roboto","Helvetica","Arial",sans-serif', marginTop: 3, color: '#d32f2f', fontSize: '0.75rem', fontWeight: 400 }}>{formError.icon}</div> : <></>}
                </Grid>

                <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Avatar               //Avatar is used for showing selected image
                        alt="Icon"
                        variant="rounded"
                        src={icon.file}
                        sx={{ width: 80, height: 80 }}  //sx=>means 'style'
                    />
                </Grid>

                <Grid item xs={6}>
                    <Button onClick={handleClick} variant="contained" fullWidth>Submit</Button>
                </Grid>

                <Grid item xs={6}>
                    <Button variant="contained" fullWidth>Reset</Button>
                </Grid>
            </Grid>
        </div>
    </div>)
}



please let me know , is it possible or not ? if yes , Then what changes I have to do ?```

```