Redux, state not defined

Question

trying to make an option to change the color of text,border,background but i get the error state is not defined in the console.it says that state.options.text that i addressed in option page is not defined, i checked the routing and it is Ok

option page

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {textCH, borderCh, backgroundCh} from '../Utilities/options/theme'
function Options() {

    const textcolor = useSelector((state)=>state.options.text)

    console.log(textcolor);
    return (
        <div style={{ paddingLeft: '20px' }}>
            <h1>OPTIONS</h1>

            text color: <input type={'color'} /> 
            border color: <input type={'color'} /> 
            background color: <input type={'color'} />
        </div>
    )
}

export default Options

Reducer

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
   text:'#000000',
    border:'#000000',
    background:'#FFFFFF',
}

export const optionsSlice = createSlice({
  name: 'options',
  initialState,
  reducers: {
    textCH: (state,action) => {
         state.text = action.payload
    },
    borderCh: (state,action) => {
      state.border = action.payload
    },
    backgroundCh: (state, action) => {
      state.background = action.payload
    },
  },
})
export const { textCH, borderCh, backgroundCh } = optionsSlice.actions
export default optionsSlice.reducer

Store file

import { configureStore } from '@reduxjs/toolkit'
import {optionsSlice} from './options/theme'
export const store = configureStore({
  reducer: {
    options: optionsSlice,
  },
})

Console error:

Uncaught TypeError: state.options is undefined textcolor Options.jsx:6

Provider setup:

     import React from "react";
        import ReactDOM from "react-dom/client";
        import App from "./App";
        import {store} from "./Utilities/store";
        import { Provider } from "react-redux";
        
        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(
          <>
            <Provider store={store}>
              <App />
            </Provider>
          </>
        );

Answer 1

You're importing the slice itself in the store.js, not reducer.

instead of calling the named function:

import {optionsSlice} from './options/theme'

we should call the default one:

import optionsSlice from './options/theme'