Passing value of component in separate jsx file's value to event on Full-Calendar

Question

I am new to React. I am trying to pass the value of a select box imported from a separate .jsx file to an event for full-calendar. I can't find anything on this or figure out how to do it for the life of me. This is my component for the select box in a separate file.

import React from 'react'

export const Dropdown = (props) => (
  <div className="form-group">
    <select
      className="form-control"
      name="partner"
      onChange={props.onChange}
    >
      <option defaultValue>Select Partner</option>
      {props.options.map((item, index) => (
        <option key={index} value={item.value}>
          {item.label}
        </option>
      ))}
    </select>
  </div>
)

export default class DropdownList extends React.Component {
  constructor() {
    super()
    this.state = {
      list: [],
      chosenValue: '',
    }
  }

  componentDidMount() {
    fetch('/calendar/users')
      .then((response) => response.json())
      .then((item) => this.setState({ list: item }))
  }

 onDropdownChange = (e) => {
    this.setState({ chosenValue: e.target.value })
  }

  render() {
    return (
      <div className="form-group">
        <Dropdown
          name="partner"
          id="partner"
          options={this.state.list}
          onDropdownChange={this.onDropdownChange}
        />
      </div>
    )
  }
}

This is my modal that contains the form to pass through as an event to full-calendar

import React, {useState} from "react";
import Modal from "react-modal";
import DateTimePicker from "react-datetime-picker";
import 'bootstrap-icons/font/bootstrap-icons.css'
import DropdownList from "./SelectBox";

export default function ({ isOpen, onClose, onEventAdded }) {
    const [title, setTitle] = useState("");
    const [start, setStart] = useState(new Date());
    const [end, setEnd] = useState(new Date());
    const [selectValue] = useState(DropdownList);

    const onSubmit = (event) => {
        event.preventDefault();

        onEventAdded({
            title,
            start,
            partner: selectValue,
            end
        });
        onClose()
    };
    

    return (
            <Modal isOpen={isOpen}
                onClose={onClose}
                style={{
                    overlay: {
                        backgroundColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    content: {
                        top: '50%',
                        left: '50%',
                        right: 'auto',
                        bottom: 'auto',
                        marginRight: '-50%',
                        transform: 'translate(-50%, -50%)',
                        border: '1px solid #ccc',
                        background: '#fff',
                        overflow: 'auto',
                        WebkitOverflowScrolling: 'touch',
                        borderRadius: '4px',
                        outline: 'none',
                        padding: '20px',
                        maxWidth: '1200px',
                        minHeight: '80%',
                        textAlign: 'center'
                    }
                }}
            >
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/lux/bootstrap.min.css" />
                <form onSubmit={onSubmit}>
                <div className='form-group'>
                    <input className='form-control' placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
                </div>
                <DropdownList />
                <div className='form-group'>
                        <DateTimePicker name='start' value={start} onChange={date => setStart(date)} />
                    </div>
                    <div className='form-group'>
                        <DateTimePicker name='end' value={end} onChange={date =>setEnd(date)} />
                    </div>
                    <button className="btn btn-primary btn-block" type="submit">Add Event</button>
                    <button className="btn btn-danger btn-block" onClick={onClose}>Cancel</button>
                </form>
            </Modal>
            )
}

I have tried DropdownList.value, redoing the onDropdownChange(e) function in the modal jsx file to no avail. I'm sure this is really simple and I'm getting a headache so thank you for your kindness ahead of time. I'm currently trying to use props but it's all coming up undefined.

Edit: tried to add to component in the modal file

const [partner, setPartner] = useState();

                <DropdownList
                ref={partnerRef}
                onDropdownChange={e => setPartner(this.chosenValue = e.target.value)}
                />