Jak przesłać klucz obcy do tabeli w DRF?

class CourseCategory(models.Model):
    title = models.CharField(max_length=150)
    description = models.TextField()

    class Meta:
        verbose_name_plural = "2. Course Categories"

    def __str__(self):
        return self.title


class Course(models.Model):
    category = models.ForeignKey(
        CourseCategory, on_delete=models.CASCADE, related_name='tracks', null=True)
    instructor = models.ForeignKey(Instructor, on_delete=models.CASCADE)
    title = models.CharField(max_length=150)
    description = models.TextField()
    image = models.ImageField(upload_to='course_imgs/', null=True)
    techs = models.TextField(null=True)

    class Meta:
        verbose_name_plural = "3. Courses"

class CategorySerializer(serializers.ModelSerializer):
    tracks = serializers.PrimaryKeyRelatedField(many=True, read_only=True)
    

    class Meta:
        model = models.CourseCategory
        fields = ['id', 'title', 'description', 'tracks']


class CourseSerializer(serializers.ModelSerializer):
    

    class Meta:
        model = models.Course
        fields = '__all__'

from django.urls import path
from . import views

urlpatterns = [
    # instructor
    path('instructor/', views.InstructorList.as_view()),
    path('instructor/<int:pk>/', views.InstructorDetail.as_view()),
    path('instructor-login', views.instructor_login),
    # category
    path('category/', views.CategoryList.as_view()),
    # course url
    path('course/', views.CourseList.as_view())
]

from ast import main
import imp
from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import generics
from rest_framework import permissions
from rest_framework import status
from .serializers import InstructorSerializer, CategorySerializer, CourseSerializer
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse, HttpResponse
from . import models
from rest_framework.parsers import MultiPartParser, FormParser


class InstructorList(generics.ListCreateAPIView):
    queryset = models.Instructor.objects.all()
    serializer_class = InstructorSerializer
    


class InstructorDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = models.Instructor.objects.all()
    serializer_class = InstructorSerializer
    


@csrf_exempt
def instructor_login(request):
    email = request.POST['email']
    password = request.POST['password']
    instructorData = models.Instructor.objects.get(
        email=email, password=password)
    if instructorData:
        return JsonResponse({'bool': True})
    else:
        return JsonResponse({'bool', False})


class CategoryList(generics.ListCreateAPIView):
    queryset = models.CourseCategory.objects.all()
    serializer_class = CategorySerializer


class CourseList(generics.ListCreateAPIView):
    parser_classes = (MultiPartParser, FormParser)

    def get(self, request):
        queryset = models.Course.objects.all()
        serializer_class = CourseSerializer(queryset, many=True)
        return Response(serializer_class.data)

    def post(self, request):
        posts_serializer = CourseSerializer(data=request.data)
        if posts_serializer.is_valid():
            posts_serializer.save()
            return Response(posts_serializer.data, status=status.HTTP_201_CREATED)
        else:
            print('error', posts_serializer.errors)
            return Response(posts_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
    #

import {Link} from 'react-router-dom';
import InstructorSidebar from './InstructorSidebar';
import React, { useState,useEffect } from 'react';
import axios from 'axios';
const baseUrl='http://127.0.0.1:8000/api2';
function AddCourse(){
    
    const [categories,setCategories] = useState([]);
    const [courseData,setCourseData] = useState({
        category:'',
        title:'',
        description:'',
        image:'',
        techs:''
    });
    useEffect(()=>{
        try {
            axios.get(baseUrl+'/category')
            .then((res)=>{
                setCategories(res.data);
            });
        }catch(error){
            console.log(error);
        }
    },[]);
    const handleChange=(event)=>{
        setCourseData({
            ...courseData,
            [event.target.name]:event.target.value
        });
    };
    const handleFileChange=(event)=>{
        setCourseData({
            ...courseData,
            [event.target.name]:event.target.files[0]
        });
    }
    const formSubmit=()=>{
        const _formData = new FormData();
        _formData.append('category',courseData.category);
        _formData.append('instructor',1);
        _formData.append('title',courseData.title);
        _formData.append('description',courseData.description);
        _formData.append('image',courseData.image,courseData.image.name);
        _formData.append('techs',courseData.techs);
        try {
            
            axios.post(baseUrl+'/course/',_formData,{
                
                headers: {
                    'content-type':'multipart/form-data'
                }
            })
            .then((res)=>{
                console.log(res.data);
        });
        }catch(error){
            console.log(error.response);
        }
    }
    
    return (
        
        <div className="container mt-4">
            <div className="row">
                <aside className="col-md-3">
                    <InstructorSidebar/>
                    
                </aside>
                <section className="col-md-9">
                    {/*Dashboard */}
                    <div className="card">
                        <h5 className="card-header">Dodawanie kursu</h5>
                        <div className="card-body">
                            <form>
                                <div className='mb-3'>
                                    <label htmlFor='title' className='form-label'>Kategoria</label>
                                    
                                    <select name='category' onChange={handleChange} className='form-control'>
                                        {categories.map((category,index)=>{return <option key={index} defaultValue={category.id}>{category.title}</option>})}
                                    </select>
                                </div>
                                {/**zmiana */}
                                <div className='mb-3'>
                                    <label htmlFor='title' className='form-label'>Tytuł</label>
                                    <input type='text' name='title' onChange={handleChange} defaultValue={courseData.title} id='title' className='form-control'/>
                                </div>
                                <div className='mb-3'>
                                    <label htmlFor='description' className='form-label'>Opis</label>
                                    <textarea name='description' onChange={handleChange} defaultValue={courseData.description} className='form-control' id='description'></textarea>
                                </div>
                                <div className='mb-3'>
                                    <label htmlFor='image' className='form-label'>Obrazek</label>
                                    <input type='file' name='image' accept='image/jpeg,image/png,image/gif' onChange={handleFileChange} id='image' className='form-control'/>
                                </div>
                                <div className='mb-3'>
                                    <label htmlFor='techs' className='form-label'>Technologie</label>
                                    <textarea name='techs' onChange={handleChange} defaultValue={courseData.techs} className='form-control' placeholder='JavaScript, PHP, C#' id='techs'></textarea>
                                </div>
                                <button type='submit' onClick={formSubmit}  className='btn btn-primary'>Submit</button>
                            </form>
                            
                        </div>
                    </div>
                    
                </section>
            </div>
        </div>
    )
}
export default AddCourse;

<select name='category' onChange={handleChange} className='form-control'>
    {categories.map((category,index)=>{return <option key={index} defaultValue={category.id}>{category.title}</option>})}
</select>

const formSubmit=()=>{
        const _formData = new FormData();
        _formData.append('category',2);
        //lub
        _formData.append('category',1)
        _formData.append('instructor',1);
        _formData.append('title',courseData.title);
        _formData.append('description',courseData.description);
        _formData.append('image',courseData.image,courseData.image.name);
        _formData.append('techs',courseData.techs);
        try {
           
            axios.post(baseUrl+'/course/',_formData,{
                
                headers: {
                    'content-type':'multipart/form-data'
                }
            })
            .then((res)=>{
                console.log(res.data);
        });
        }catch(error){
            console.log(error.response);
        }
    }