Get selected queryables into Sidebar.jsx

  const [dateFromVal, setDateFromVal] = React.useState(null);     // From Date

  const [dateToVal, setDateToVal] = React.useState(null);         // To Date

  //const for callback

  const {UpdateQueryableTitles} = props;

  const handleExpandFilterClick = () => {

    setExpandFilter(!expandFilter);

  }

    const selectedValues = event.target.value;

    setSelectedOptions(selectedValues);

    /*// Create an array of objects with selected option and value

    // Create an array of objects with selected option and value

    const selectedOptionsWithValues = selectedValues.map((option) => ({

      option,

        value: queryableTitles.find((title) => title.title === option)?.value, 

      }));

  // Pass the selected options and values to FootprintResults

    props.updateSelectedOptions(selectedOptionsWithValues); */

    UpdateQueryableTitles(selectedOptionsWithValues); 

  };

    setSelectedTitle(newTitle);

  };

  //Callback to update selected queryables

  const UpdateQueryableTitles = (selectedQueryables) => {

    console.log("Selected Queryables: ", selectedQueryables);

  }

  return (

    <>

      <div id="right-bar" className="scroll-parent">

            targetName={props.target.name}

            target={props.target}

            selectedTitle={selectedTitle} 

            UpdateQueryableTitles = {UpdateQueryableTitles}

          />

          <FootprintResults

            target={props.target}