In React component, populate a dropdown menu from one serializer and post it to through another serializer

Using Django Forms & APIs
1

Firstly, this query is related to React library so I am not quite sure if it follows this community policy or something like that. Pardon any mistake.
So, i have a Course model, an Examschedule model where Course model is in Manytomany relationship with the examschedule model through CourseSchedule model.


class Course(models.Model):
  
    semester = models.ForeignKey(Semester,on_delete=models.CASCADE, related_name='semester_course')
    course_code = models.CharField(max_length=100, unique=True)
    course_name = models.CharField(max_length=200, unique=True)
    def __str__(self):
        return self.course_code

class ExamSchedule(models.Model):
    sem = models.ForeignKey(Semester, on_delete=models.CASCADE)
    date_generation = models.DateField(auto_now_add=True)
    exam_year = models.CharField(max_length=10)  
    course_schedule = models.ManyToManyField(Course, through='CourseSchedule')
    class Meta:
        unique_together = ('sem', 'exam_year')

    def __str__(self):
        return 'ExamSchedule'+self.exam_year +' '+self.sem.exam_system.year +' year '+self.sem.semester + ' sem'

class CourseSchedule(models.Model):
    course_code = models.ForeignKey(Course, on_delete=models.CASCADE, related_name='course_code_for_schedule')
    schedule = models.ForeignKey(ExamSchedule, on_delete=models.CASCADE)
    exam_date = models.DateField()
    time = models.CharField(max_length=50)

    class Meta:
        unique_together = ('course_code', 'schedule')

    def __str__(self):
        return 'Course Schedule'+ self.schedule.sem.semester+ ' sem'+ self.schedule.sem.exam_system.year+' year'

    def clean(self):
        super().clean()
        if self.course_code.semester != self.schedule.sem:
            raise ValidationError('The course does not belong to the same semester as the exam schedule.')

The serializers.py file is following:

class CourseSerializer(serializers.ModelSerializer):
    semester = SemesterSerializer()

    class Meta:
        model = Course
        fields = '__all__'

class ExamScheduleSerializer(serializers.ModelSerializer):
    course = CourseSerializer()

    class Meta:
        model = ExamSchedule
        fields = '__all__'


class CourseScheduleSerializer(serializers.ModelSerializer):
    class Meta:
        model = CourseSchedule
        # fields = ['id', 'course_code_schedule', 'course_name_schedule', 'schedule', 'exam_date', 'time']
        fields = '__all__'

I am using react library as frontend to make table like form with fields ExamDate, Course Code, Time where the course code will be a dropdown menu populated from the previously created courses and i can post the data to courseScheduleSerializer. For populating the dropdown I guess i have to use CourseSerializer and for sending the data to backend I need to use CourseScheduleSerializer. Help please