I am very new to React and need some help about passing props.

I am trying to replicate a synthesize I made in Vanilla JS and having some trouble.

In Vanilla JS you can grab the input value through querySelector and pass that value into whatever: In this case I want to pass the value of an input element to an oscillator's frequency value,not sure how to do it. I'm also very hazy when it comes to parent and child components.

This is what I have so far:

import {FaPlay} from "react-icons/fa";
import {FaStop} from "react-icons/fa"
import Frequency from "./frequency"; <--the child (parent?) component in question

const Synthnode = () => {

    let AudioContext = window.AudioContext || window.webkitAudioContext;
    let audioContext = new AudioContext();
    let osc = audioContext.createOscillator();
    osc.type = 'sine';
    // osc.frequency.value = 300; <-- when changing the input value in frequency.js, I want this value (300) to change
    osc.start();
    let oscState = false;

    const toggleSynth = () => {
        audioContext.resume().then(() => {
            osc.connect(audioContext.destination);
            oscState = true;
        })
    }
    const toggleOffSynth = () => {
        if (oscState) {
            osc.disconnect(audioContext.destination);
            oscState = false;
        }
    }

    return ( 
        <div className="buttons">
            <button onClick={toggleSynth}><FaPlay/></button>
            <button disabled={oscState} onClick={toggleOffSynth}><FaStop/></button>
            <Frequency />
        </div>
     );
}
 
export default Synthnode

Here is the other component. I read another post on here about what to use instead of querySelector and was introduced to Hooks, which is what I seem to be using here:

    import {useState} from 'react';

const Frequency = () => {
    const [frequency, setFrequency] = useState("")
    console.log(frequency);
    return (
        <div className="change-frequency">
            <input value={frequency} 
            type="range" 
            min="1" 
            max="1000" 
            class="slider" 
            onChange={(e) => setFrequency(e.target.value)}/>
        </div>
    )
}
 
export default Frequency;

So when I move the slider around, the value logs to the console correctly. Just not sure how to pass that value into the other component in osc.frequency.value