Всем привет можете подсказать почему у меня не выводиться сбоку

выбранное значение из checkbox раньше выводился, после добавление глобального стейта перестал выводиться
Вот код компонента :

import React, { useState, useContext } from 'react'
import Helmet from 'react-helmet';
import {
Container, FormCheck, FormCheckInput, Button, FormGroup,
} from 'styled-bootstrap-components'
import { useForm } from 'react-hook-form'
import { useDispatch, useSelector } from 'react-redux'
import { MenuCreaterOrders } from '../../../components/MenuCreateOrder/MenuCreaterOrders'
import {
Main, Content, H1, DivCategories, DivForm,
} from './style'
import { useDate } from '../../../components/DataContext/DataContext';
import { SideInfoOrder } from '../../../components/SideInfoOrder/SideInfoOrder'
import { addCategoriesAction } from '../../../store/categoriesReducer';

export const Categories = (props) => {

const categories = [
{title: 'Картины' },
{ title: 'Обработка фото' },
{ title: 'Шарж' },
{title: 'Портрет' },
{ title: 'Пейзаж' },
]

const dispatch = useDispatch()

const addCategories = ({ categoriess }) => {
dispatch(addCategoriesAction(enter))
}


const {
register, handleSubmit, watch,
} = useForm();
const watchAllFields = watch();
const enter = Object.keys(watchAllFields).filter((elem) => watchAllFields[elem] !== false);
const onSubmit = async (data) => {
// const response = await request({ method: 'post', data , url: '/project/create/categories' })
console.log(data)
props.history.push('/project/create/explanation');
}

return (

<Main>
<Container>
<Helmet title="Выбор категории" />
<MenuCreaterOrders />
<div>
<SideInfoOrder title1 = "Категория" />
<Content>
<H1> Выбор категории </H1>

<DivForm>
<form onSubmit={handleSubmit(onSubmit)} >
<DivCategories>

{categories.map((d, i) => (

<FormCheck key= {i}>
<label >
<FormCheckInput type="checkbox" name = {d.title} value = {d.title} ref = {register} /> {d.title}
</label>
</FormCheck>

))}


</DivCategories>
<FormGroup>
<Button onClick = {() => addCategories(enter)} block success >
Продолжить
</Button>
</FormGroup>
</form>

</DivForm>
</Content>
</div>
</Container>
</Main>
)
}

Вот код компонента SideInfoOrder
import React, { useEffect, useContext } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { DivCheck, TextCheck, P } from './style'
import { OrderCreatorContext } from '../../context/orderCreatorContext/globalState'

export const SideInfoOrder = (props) => {
const categoriesEnter = useSelector((state) => state.categoriesReducer)
console.log(categoriesEnter)
return (

<DivCheck>

<h3>Ваш проект</h3>
<TextCheck>{props.title1} </TextCheck>

{categoriesEnter?.enter?.map((categories) => <P>{categories}</P>)}
<br/>
<TextCheck>{props.title2} </TextCheck>
{props.named}
<br/>
<TextCheck>{props.title3} </TextCheck>
{props.description}
<br/>
{props.description2}
<br/>
<br/>
</DivCheck>

)
}

Заранее спасибо

Закинь на codesandbox