Best way of passing props from Provider to Context

interface DataGridContextValue {
  readonly markets: Record<string, string>;
}

interface DataGridProviderProps {
  children: JSX.Element;
  markets: Record<string, string>;
}

export const DataGridContext = createContext<DataGridContextValue>();

export const DataGridProvider: Component<DataGridProviderProps> = (props) => {
  // Implementation ...

  const values = {
    get markets() {
      return props.markets;
    },
    // ... implementation API.
  };

  return <DataGridContext.Provider value={values}>{props.children}</DataGridContext.Provider>;
};

export const DataGrid: Component<DataGridProps> = () => {
  const [markets] = createResource<Record<string, string>>(getMarkets);

  return (
    <DataGridProvider markets={markets()}>
      ...children
    </DataGridProvider>
  );
};