is this called as prop drilling ?

// Rating.js
import { useState } from "react";

export default function Rating({ onRatingChange, onRatingSubmit }) {
    const [active, setActive] = useState(null); // Set the initial active state to null

    const handleRatingSelect = (rating) => {
        onRatingChange(rating);
        setActive(rating); // Set the active state to the selected rating
    };

    return (
        <div className='border-2 border-black w-96 p-4'>
            <p className="text-5xl">How did we do?</p>
            <p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
            <div className='flex flex-row gap-5'>
                {[1, 2, 3, 4, 5].map((rating) => (
                    <p
                        className={`w-12 h-12 rounded-full flex items-center justify-center ${ active === rating ? "bg-blue-500" : "bg-blue-100" }`}
                        key={rating}
                        onClick={() => handleRatingSelect(rating)}
                    >
                        {rating}
                    </p>
                ))}
            </div>
            <button className='w-full mt-4' onClick={onRatingSubmit}>
                submit
            </button>
        </div>
    );
}

// Rating.js
import { useState } from "react";

export default function Rating({ onRatingChange, onRatingSubmit }) {
    const [active, setActive] = useState(null); // Set the initial active state to null

    const handleRatingSelect = (rating) => {
        onRatingChange(rating);
        setActive(rating); // Set the active state to the selected rating
    };

    return (
        <div className='border-2 border-black w-96 p-4'>
            <p className="text-5xl">How did we do?</p>
            <p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
            <div className='flex flex-row gap-5'>
                {[1, 2, 3, 4, 5].map((rating) => (
                    <p
                        className={`w-12 h-12 rounded-full flex items-center justify-center ${ active === rating ? "bg-blue-500" : "bg-blue-100" }`}
                        key={rating}
                        onClick={() => handleRatingSelect(rating)}
                    >
                        {rating}
                    </p>
                ))}
            </div>
            <button className='w-full mt-4' onClick={onRatingSubmit}>
                submit
            </button>
        </div>
    );
}

export default function Thankyou ({value}) {
  return (
    <div className='border-2 border-black w-96 p-4'>
        <p>you selected {value} out of 5</p>
        <h2>Thank you</h2>
        <p>We appreciate you taking the time to give a rating. If you ever need more support, don’t hesitate to get in touch!</p>
    </div>
  );
}

export default function Thankyou ({value}) {
  return (
    <div className='border-2 border-black w-96 p-4'>
        <p>you selected {value} out of 5</p>
        <h2>Thank you</h2>
        <p>We appreciate you taking the time to give a rating. If you ever need more support, don’t hesitate to get in touch!</p>
    </div>
  );
}