Custom use API Hook Error: Could not find react-redux context value; please ensure the component is wrapped in a <Provider>

I am already using a tag in my index.js file

Yes, this is true, but this is only for the overall app code, not specific units of code being tested. None of BrowserRouter, GlobalStyles, Provider, or even App, is rendered in that unit test case. You still need to wrap components in unit tests with all the providers they expect, i.e. a Redux Provider in this case.

Basic gist is to instantiate a test store and wrap the CreateGreeting component being tested with a Redux Provider component.

Example:

import { render } from '@testing-library/react';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import rootReducer from '../rootReducer';
test("renders create greeting page", () => {
  // Create a Redux store
  const store = configureStore({
    reducer: rootReducer,
    preloadedState: {
      // any initial/preloaded state necessary for the test case
      // omit preloadedState if default initial state is ok
    },
  });
  // Define a wrapper component to provide the store
  const Wrapper = ({ children }) => (
    {children}
  );
  // Render the component under test, wrapped with providers component
  render(, { wrapper: Wrapper });
  // NOTE: you could also just directly wrap CreateGreeting in Provider,
  // but this isn't as desirable.
  // render(
  //   
  //     
  //   
  // );
  // Make test assertions
  const linkElement = screen.getByText("Choose a Design");
  expect(linkElement).toBeInTheDocument();
});

See Writing Tests for Redux's broad general documentation.

Needing to wrap and provide contexts is common enough it's recommended to create dedicated reusable wrappers.

Example:

import { render } from '@testing-library/react';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import rootReducer from '../rootReducer';
const setupStore = (preloadedState) => configureStore({
  reducer: rootReducer,
  preloadedState
});
export const renderWithProviders = (ui, extendedRenderOptions) => {
  const {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = setupStore(preloadedState),
    ...renderOptions
  } = extendedRenderOptions;
  const Wrapper = ({ children }) => (
      {/ Other possible providers/wrapper components /}
      {children}
      {/ Other possible providers/wrapper components /}
  );
  // Return an object with the store and all of RTL's query functions
  return {
    store,
    ...render(ui, { wrapper: Wrapper, ...renderOptions })
  };
};

import { renderWithProviders } from '../test-utils';
test("renders create greeting page", () => {
  // Use custom test render function, pass any additional render options
  renderWithProviders(
    ,
    / { store, or preloadedState, render options, etc } /
  );
  // Make test assertions
  const linkElement = screen.getByText("Choose a Design");
  expect(linkElement).toBeInTheDocument();
});