Re render a functional React component on a state change

Question

I have a Form group that has multiple possible values. This selected value is then sent as a prop to another component so that it can be used in the other component. The problem I am getting is that when another element is selected, the other component doesn't re render with the new prop value.

This is the part of the code I am referring to:

import OtherComponent from './OtherComponent ';

function Body(){

   
   const [selectedStreet, setSelectedStreet] = useState("11th ave n ganservoort - 12th ave @ 40th st");

   return (
       <div>

           <Form className="mt-5">
               <Form.Group controlId="exampleForm.SelectCustom">
                   <Form.Label>Select Street</Form.Label>
                   <Form.Control as="select" onChange={ (event) =>{
                       setSelectedStreet(event.target.value)
                       // console.log(event.target.value)
                       // console.log(selectedStreet)
                   }} custom>
                       {dataToday.map(s => (
                               <option key={s["street"]} value={s["street"]}>{s["street"]}</option>
                       ))}
                       

                   </Form.Control>
               </Form.Group>
           </Form>
           <OtherComponent streetname={selectedStreet}></OtherComponent >


       </div>


          
   );
}

export default Body;

The options inside the form group are just a list of strings. I want to know how to be able to call again the component once the user changes the value of the form group.

This is the OtherComponent:

import { Bar, Line, Pie } from 'react-chartjs-2';
import React, { useState } from 'react';

function OtherComponent(props) {

   console.log(props.streetname);

   const [barData, setBarData] = useState({
       labels: ['label 1', 'label 2', 'label 3', 'label 4'],
       datasets: [
           {
               label: props.streetname,
               data: [
                   48,
                   35,
                   73,
                   82
               ],
               backgroundColor: [
                   'rgba(255, 99, 132, 0.6)',
                   'rgba(54, 162, 235, 0.6)',
                   'rgba(255, 206, 86, 0.6)',
                   'rgba(75, 192, 192, 0.6)'
               ],
               borderWidth: 3
           }
       ]
   });

   // set options
   const [barOptions, setBarOptions] = useState({
       options: {
           scales: {
               yAxes: [
                   {
                       ticks: {
                           beginAtZero: true
                       }
                   }
               ]
           },
           title: {
               display: true,
               text: props.streetname,
           },
           legend: {
               display: true,
               position: 'top'
           }
       }
   });

   // return JSX
   return (
       <div className="BarExample">
           <Bar
               data={barData}
               options={barOptions.options} />
       </div>
   );
}