React-Redux Component Not Showing Up

Question

I am currently practising with React and Redux by making a simple Todo list where you can check items off as complete. I am trying to implement a basic button to test if my code works with toggling the Todo item as complete or incomplete. I am trying to render a button (ToggleBox.js) inside of the Todo component inside of AllTodos.js but the box does not seem to be showing up within the map function however it does show up if I place outside of the map.

Any help with why this is happening would be greatly appreciated. I will post the code from the two files below.

Thank you, Liam

AllTodos.js:

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { loadData, selectAllTodos, toggleTodo } from './allTodosSlice';
import { Todo } from '../../components/Todo';
import { ToggleBox } from '../../components/ToggleBox';

export const AllTodos = () => {
const allTodos = useSelector(selectAllTodos);
const dispatch = useDispatch();

const onFirstRender = () => {
    dispatch(loadData());
}

useEffect(onFirstRender, []);

const onToggleTodoHandler = (todo) => {
    dispatch(toggleTodo(todo));
}

return (
    <div>
        {allTodos.map((todo) => (
            <Todo todo={todo} complete={todo.completed} key={todo.id}>
                <ToggleBox
                    onClickHandler={() => onToggleTodoHandler(todo)}
                />
            </Todo>
        ))}
    </div>
)
}

ToggleBox.js:

export const ToggleBox = ({ children, onClickHandler }) => {
return (
    <button className="check-box" onClick={onClickHandler}>
    </button>
)

}