How to pass the selected Value of dropdown menu to another file.jsx

React
1

import React, { useState } from “react”;
import Select from “react-select”;
import ‘./index.css’
function Appleague() {
const league = [
{ label: “…”, value: “…” },
{ label: “premier league”, value: “premier league” },
{ label: “la liga”, value: “la liga” },
];
// set value for default selection
const [selectedValueLeague, setSelectedValue] = useState(3);

// handle onChange event of the dropdown
const handleChange = (e) => {
setSelectedValue(e.value);
};

return (



Please select league name

<Select
className=“sel”
placeholder=“…”
value={league.filter((obj) => obj.value === selectedValueLeague)} // set selected value
options={league} // set list of the data
onChange={handleChange} // assign onChange function
/>

  {selectedValueLeague && (
    <div style={{ marginTop: 20, lineHeight: "25px" }}>
      {/* <div>
        <b>Selected Value: </b> {selectedValueLeague}
      </div> */}
    </div>
  )}
</div>

);
}

export default Appleague;

I want to export selectedValueLeague and can use it in another file.jsx.
like a global variable
thanks alot