If statement within an input field

I am using Bootstrap with React and there is an option within an input <input ... readonly/> field to set readonly, now I have an input field set to readonly. However, when the user clicks on a button, I want the readonly mode to disappear and the user to be able to use that input field. However, my if statement does not work. What is the best way to do this?

What I tried

{ clicked ?
   readOnly : null
}

My Code

const Profile = () => {

const [clicked, setClicked] = useState(true);
const onClickBack = () => {
    setClicked(false);
}


return (
    <div>

          <div className="form-group">
              <div className="col-xs-4">
                <label for="exampleInputName">Name</label>
                  <input
                         type="text"
                         className="form-control" 
                         placeholder="Name"
                      // THIS IS WRONG  ↓                            
                      { clicked ?
                            readOnly : null
                      }
                      // THIS IS WRONG  ↑                              
                                                    
                  />
             </div>
           </div>
           <button
              type="button"
              id="submit"
              name="submit"
              className="btn btn-primary submit-button ml-5"
              onClick={onClickBack}
               >
              Back
           </button>

    </div>
);
};

export default Profile;