Component prop not changing when select value changes
Solution 1:
Your variable selectedSchool is not reactive, you can use hook useState and it will be update state in props. Example:
const [setSelectedSchool, selectedSchool] = useState(schools[0]);
const handleChange = (e) => {
setSelectedSchool(schools[e.target.value])
}
Also you don't need to do this document.getElementById("schoolName").innerText = "Name: " + selectedSchool.name it's incorrect.
You have correct JSX <h4 id="schoolName">Name: {selectedSchool.name}</h4> already