React DnD, could not find “store” in the context of Connect(Droppable)

Hello I am trying to make a drag and drop in my application but I have got a huge error. I have no idea if property is missing because in IDE it is an error free code.

Uncaught Error: Could not find "store" in the context of "Connect(Droppable)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Droppable) in connect options.

Down here are my components

3 Columns ( I want drag and drop across one column each, not between them)

const DetailColumns: React.FC<funcProps> = (props) => {
  const onDragEnd = () => {};
  return (
    <Box
      h="80vh"
      borderWidth="0.5rem"
      borderColor="orange.300"
      borderRadius="1rem"
      w="80%"
      marginTop="2rem"
    >
      <Grid w="100%" h="100%" templateColumns="60% 20% 20%">
        <Box border="0.5rem" borderColor="orange.300">
          <RecipeDescriptionBox recipe={props.recipe} />
        </Box>
        <Box borderLeftWidth="0.5rem" borderColor="orange.300">
          <RecipeStepsBox recipe={props.recipe} />
        </Box>
        <DragDropContext onDragEnd={onDragEnd}>
          <Box borderLeftWidth="0.5rem" borderColor="orange.300">
            <RecipeIngredientsBox recipe={props.recipe} />
          </Box>
        </DragDropContext>
      </Grid>
    </Box>
  );
};

List of Items

<Box>
      <ColumnHeader title="Steps" />
      <Droppable droppableId="unique">
        {(provided) => (
          <Box {...provided.droppableProps} innerRef={provided.innerRef}>
            {steps.map((step, index) => (
              <DetailListItem
                key={step}
                itemName={step}
                indexOfItem={index}
                id={Math.random().toString()}
              />
            ))}
            {provided.placeholder}
          </Box>
        )}
      </Droppable>
    </Box>

Item element

<Draggable draggableId={props.id} index={props.indexOfItem}>
      {(provided) => (
        <Box
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          innerRef={provided.innerRef}
        >
          <Flex margin="1rem">
            <Box
              bgGradient="linear(to-r, orange.200, orange.400)"
              height="6vh"
              width="6vh"
              boxShadow="md"
              rounded="md"
            >
              <Grid w="100%" h="100%" placeItems="center">
                <Text color="white" fontWeight="700" fontSize="140%">
                  {props.amount && props.amount + props.unit}
                  {!props.amount && props.indexOfItem}
                </Text>
              </Grid>
            </Box>
            <Grid placeItems="center">
              <Text marginLeft="1rem" fontWeight="500" fontSize="1.8rem">
                {props.itemName}
              </Text>
            </Grid>
          </Flex>
        </Box>
      )}
    </Draggable>

If you want I can put this code to some sandbox to make it easier to debug.