Trying to use context to pass values between components:

Created a file to handle the Context: only issue I have now is that:

"Cannot call createContext with object literal bound to defaultValue because number [1] is incompatible with Number [2] in property index."

// @flow
import React, { createContext, useContext } from "react";

export type CountryIndexProviderType = {
  index: Number,
};

const CountryContext = createContext<CountryIndexProviderType>({
  index: 0,
});

type CountryContextProviderProps = {
  index: Number,
};

const CountryContextProvider = ({ index }: CountryContextProviderProps) => {
  return <CountryContext.Provider value={{ index }}></CountryContext.Provider>;
};

const useCountryIndexContext = () => useContext(CountryContext);

export { CountryContext, CountryContextProvider, useCountryIndexContext };

First component whereby value of index is being set:

import { CountryContextProvider } from "/EnteredCountriesContext";

return (
  <StyledWrappingContainer>
    <StyledProgress>{index + 2}</StyledProgress>
    <CountryContextProvider index={index}></CountryContextProvider>
  </StyledWrappingContainer>
);

Second component trying to consume Context:

import { useCountryIndexContext } from "/EnteredCountriesContext";
const { index } = useCountryIndexContext();

<StyledWrappingContainer>
   <StyledProgress>
      <StyledProgress>{index + 2}</StyledProgress>
   </StyledProgress>
</StyledWrappingContainer>

Have just included JSX, only other code I have relevant to my new changes around context is the import of React in the first component.