I have a React Form component that receives a state object. The Form contains a couple of Form.Item components, one antd Input & one antd Checkbox. I have the following code in my Form component:

const RecordsForm = ({ selectedRecord, recordComponentForm }) => {
  useEffect(() => {
    debugger;
    recordComponentForm.setFieldsValue({
      Title: selectedRecord ? selectedRecord.Title : null,
      IsCurrentRecord: selectedRecord ? selectedRecord.IsCurrentRecord : true,
    });
  }, [recordComponentForm, selectedRecord]);

  return (
    <Form
      name="seasonForm"
      autoComplete="off"
      layout={"inline"}
      form={recordComponentForm}
    >
      <Form.Item
        label="Title"
        name="Title"
        rules={[{ required: true, message: "Add a Title" }]}
      >
        <Input
          name="Title"
          placeholder="Season Title"
        />
      </Form.Item>

      <Form.Item
        label="Is Active Record"
        name="IsCurrentRecord"
        valuePropName="checked"
      >
        <Checkbox name="IsCurrentRecord" />
      </Form.Item>
    </Form>
  );
};

export default RecordsForm;

where the supplied prop recordComponentForm is instantiated in the parent component: const [recordComponentForm] = Form.useForm();

When I run the application and force this component to reload with a new selectedRecord, I want the Form.Item Input value to change to the Title from the object and the Checkbox to reflect the IsCurrentRecord boolean value of the object. The object passed in looks like this:

The Title Input value changes to show the Title of the object, however the checkbox remains unchanged:

I would like the checkbox to change it's checked value depending on what comes in on the selectedRecord.IsCurrentRecord object in the same way the Title does. Any advice would be greatly appreciated.