Styled components with React context - reactjs

Question

I want to use normal React context with styled-components. I am aware of generic theme providers in styled-components, however, it will be much better if I will be able to do this by using React.useContext(). Do you know is it possible? I tried something like this.
useConfig
export function useConfig() {
const configCtx = useContext<ConfigContextShape | undefined>(ConfigContext)
return configCtx
}
example styled.ts
import { useConfig } from 'state'
import styled from 'styled-components'
const { background_color } = useConfig()
export const VisualSearchWrapper = styled.main`
color: black;
background-color: ${background_color};
`
I will be appreciated for any help.
One more update:
In the example this issue occurred:
Uncaught TypeError: Cannot read properties of undefined (reading 'context')
The ConfigContextProvider is below
import { createContext } from 'preact'
import { FC } from 'preact/compat'
import { useContext, useEffect, useState } from 'preact/hooks'
export interface ConfigProfile {
background_color: string
}
interface ConfigFunctions {
updateConfigState: (updatedConfig: ConfigProfile) => void
}
type ConfigContextShape = ConfigProfile & ConfigFunctions
export const ConfigContext = createContext<ConfigContextShape | undefined>(undefined)
export const ConfigContextProvider: FC = ({ children }) => {
const [localState, setLocalState] = useState<ConfigProfile>({
background_color: '',
})
function updateConfigState(updatedConfig: ConfigProfile) {
setLocalState({ ...localState, ...updatedConfig })
}
const ctxValue: ConfigContextShape = {
background_color: localState?.background_color ?? '',
updateConfigState
}
return <ConfigContext.Provider value={ctxValue}>{children}</ConfigContext.Provider>
}
export function useConfig() {
const configCtx = useContext<ConfigContextShape>(ConfigContext)
if (configCtx === undefined) {
throw new Error('useConfig must be used within a ConfigProvider')
}
return configCtx
}