Ничего не видно.
1. установи скриншотер
2. не спамь в чат одним и тем же вопросом

Скачай себе PrntScreen - очень удобная штука. И людям будет удобно смотреть твои скрины

Ок

Сейчас перескриню

Lightshot

Ножницы

Точно)

У винды 10 win + shift + s комбинация есть

POST — создание ресурса.
PUT — замена ресурса целиком.
PATCH — редактирование ресурса.

По идее так должно работать, тебе проще по факту проверить

По идее - да, но я походу шото не так делаю. Сейчас буду разбираться

4-5 скрин чекбокс не кликается, 2-3 вывел чекбокс все норм

import styled from "@emotion/styled/macro";

const Wraper = styled.div`
 width:566px;
 height:32px;
 border: 1px solid rgba(0, 66, 105, 0.28);
 border-radius: 4px;
 padding:8px 14px;
`;

const ItemList = styled.ul`
 align-items:center;
 margin:0;
 padding:0;
`;

const Item = styled.li`
 display: inline-flex;
 align-items: center;
 height:30px;
 background-color:rgba(0, 66, 105, 0.07);
 border-radius: 4px;
 padding-left:12px;
 list-style-type: none;
`;

const ItemContent = styled.span`
 color:rgba(0, 57, 92, 0.8);
`;

const Close = styled.a`
 display: inline-block;
 cursor: pointer;
 width:28px;
 left: 14px;
`
const DateSelector = styled.div`
 width: 594px;
 height: 188px;
 border: 1px solid rgba(0, 66, 105, 0.28);
 margin-top:12px;
 overflow-y: scroll;
`

const SelectCheckmark = styled.span`
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
`

const SelectInput = styled.input`
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
 background-color: black;

 &:checked ~ ${SelectCheckmark} {
     background-color: red;
 }
`


const SelectItem = styled.div`
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
user-select: none;


&:hover{
 ${SelectCheckmark}{
   background-color: #ccc;
 }
}
`

const EbaniyInpeut = styled.input`
 position: absolute;
 cursor: pointer;

 &:checked ~ ${SelectCheckmark} {
   background-color: red;
}
`


function App() {
 return (
   <>
     <Wraper>
       <ItemList>
         <Item>
           <ItemContent>Good morning!</ItemContent><Close>x</Close>
         </Item>
       </ItemList>
     </Wraper>
     <DateSelector>
       <SelectItem><SelectInput type="checkbox"></SelectInput>123<SelectCheckmark></SelectCheckmark> </SelectItem>
       <SelectItem>456<SelectInput type="checkbox"></SelectInput><SelectCheckmark></SelectCheckmark> </SelectItem>
     </DateSelector>
     <>
       <EbaniyInpeut type="checkbox"></EbaniyInpeut><SelectCheckmark></SelectCheckmark>
     </>
   </>
 );
}

export default App;

Ребят, странная утечка. Я получаю с сервера массив данных при помощи которых через map делаю компонентики. Они все отрисовались, все ок. Но потом я добавляю еще новый компонент, он автомат добавляет его через сервер в бд, а потом опять на фронте делает запрос и получает уже обновленные данные. Так вот суть, почему то отрисовывается новый компонент с другими данными соседнего компонента. При перезагрузке страницы все становится норм

key корректно проставлен, уникальный?

слова это конечно хорошо, но код - лучше

После твоих объяснений выглядит как «ну вроде бы, конечно, да, но лучше никак, чем так». Не уверен, что с getServerSideProps можно сделать лучше — никогда не нравился этот подход