How can I reuse variable values across components in react

I thought this would be like setting up a prop but as I understand it, a prop value is managed at the receiving component of the prop. I want to export the value to other components

Here is an example, consider this re-usable component:

RegionButtons.jsx file

import React, { useState } from 'react'
import { useSelector } from 'react-redux';
import { Box, Fab } from '@mui/material'

const RegionButtons = (
  {
    handleNationals, 
    handleState, 
    handleRegionals, 
    handleLocal, 
    selectedIndex
  }) => {

  const [selectedRegion, setSelectedRegion] = useState("local");

  const data = useSelector((state) => state.level)

  const wrestling_level = useSelector((state) => data.wrestling_level[selectedIndex])

  const nationwide = wrestling_level.Nationwide.find((s) => s.type === "Nationals");
  const statewide = wrestling_level.region.find((s) => s.region === "State");
  const regionals = wrestling_level.region.find((s) => s.region === "Regionals");
  const local = wrestling_level.region.find((s) => s.region === "Local");


  return (
    <Box className="button-area" > 
      { nationwide && <Fab onClick={handleNationals}>  NATIONALS </Fab> }
      { statewide && <Fab onClick={handleState}>       STATE     </Fab> }
      { regionals && <Fab onClick={handleRegionals}>   REGIONALS  </Fab> }
      { local && <Fab onClick={handleLocal}>           LOCAL   </Fab> }
    </Box>
  )
}

export default RegionButtons

This particular part below, I am rewriting it a lot, because there are other components that also read data from these nested arrays within the API. (mind you, I couldn't just map the info into an array and export it from redux because they are all coming from several places within the API. Or maybe I could, but either way I didn't go that route)

  const [selectedRegion, setSelectedRegion] = useState("local");
  const data = useSelector((state) => state.level)
  const wrestling_level = useSelector((state) => data.wrestling_level[selectedIndex])

  const nationwide = wrestling_level.Nationwide.find((s) => s.type === "Nationals");
  const statewide = wrestling_level.region.find((s) => s.region === "State");
  const regionals = wrestling_level.region.find((s) => s.region === "Regionals");
  const local = wrestling_level.region.find((s) => s.region === "Local");

What I am hoping to do is to store this in one util.js file that I can export and all I have to do is import nationwide, statewide, regionals, local in other components and I would have visibility into these .find().

WHAT HAVE I DONE SO FAR?

Besides a bunch of useless stuff, the closest I've gotten to it is making a utility file like so

util.js

import { useSelector } from 'react-redux';

export function Regions (selectedIndex) {

  const data = useSelector((state) => state.level)

  const wrestling_level = useSelector((state) => data.wrestling_level[selectedIndex])

  const nationwide = wrestling_level.Nationwide.find((s) => s.type === "Nationals");
  const statewide = wrestling_level.region.find((s) => s.region === "State");
  const regionals = wrestling_level.region.find((s) => s.region === "Regionals");
  const local = wrestling_level.region.find((s) => s.region === "Local");
  
  console.log("nationwide from utils file:", nationwide); //this actually works!

  return nationwide, statewide, regionals, local
}

and then in my RegionButtons.jsx file:

import {Regions} from '../../util';


Regions(selectedIndex) //use it like this and I get that console log I threw out from util.js

The problem is, if I comment out the find() lines and expect the values to still be there from my util.js file it hits me with an undefined error

Sorry for the long question. Thanks in advance