Attribute value="some value" makes input uneditable React

Question

For some reason, my input is uneditable! I need it to be on "edit post" page, so there should be value = "some prev value" so it's more convenient for the user to edit his/her own post from the previous value. Placeholder attribute doesn't fit my requirements, because it just shows the user the previous data, and doesn't let him add corrections to it, thus the user is only able to write down all the content him wants to make edits to again and again!

const ArticleTitle = window.styled.input`
  &:focus {
    outline: none;
  }
  border: none;
  width: ${adaptSize(599)};
  color: #8e8e8e;
  height: ${adaptSize(26)};
  font-size: ${adaptSize(20)}!important;
  background-color: #eeeeee;
  border-radius: ${adaptSize(9)};
  margin-bottom: ${adaptSize(14)}!important;
`;

const ArticleContent = window.styled.input`
  font-size: ${adaptSize(18)};
  padding-top: ${adaptSize(14)}!important;
  border-top: ${adaptSize(1)} solid #5e5e5e !important;
  width: ${adaptSize(1000)};
  color: #8e8e8e;
  display: flex;
  border: none;
  &:focus {
    outline: none;
  }
`;
function EditPost({article}){
         return ( <>
         <Article>
            <ArticleTitle type="text" value={article.title} id="title" />
            <ArticleContent type="text" value={article.content} id="content" />
         </Article>
         </> )
}

const article = {
  title: "some title",
  content: "some content"
};

//Example of article I want to be edited

I've edited my original code so it's more readable. The result is just input with uneditable fields! I want it to be so that the default value is still there, but so that the user can make some corrections! I don't know why is the default behavior for these two inputs is overridden by some strange behavior. I thought that the reason was display flex, but display flex is only applied to the second input, yet both are uneditable currently!

Answer 1

You must handle the onChange state of the input, if you want to pass a value prop to it, If you don't want to do that you can just replace value with defaultValue like that:

<ArticleTitle type="text" defaultValue={article.title} id="title" />